vue-cli3脚手架的配置以及使用
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过
@vue/cli
搭建交互式的项目脚手架。- 通过
@vue/cli
+@vue/cli-service-global
快速开始零配置原型开发。- 一个运行时依赖 (
@vue/cli-service
),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject
vue-cli3官网帮我们概述了vue-cli3的一些特点。个人在使用vue-cli3的感受中 零配置、可升级 2个特点确实很不错。
如何安装vue-cli3呢?
首先,你要有一个nodejs环境
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。
其次,如果你之前安装了vue-cli的旧版本,那么你要做如下操作
关于旧版本
Vue CLI 的包名称由
vue-cli
改成了@vue/cli
。 如果你已经全局安装了旧版本的vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。
假设你已有了nodejs环境,你可以通过下面指令安装vue-cli3的包
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后,你就可以在命令行中访问 vue
命令。你可以通过简单运行 vue
,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。(例如 vue --version)
接下来就是创建一个vue的项目了,使用下面命令:
vue create hello-world
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
在多选时,空格代表选中,enter代表进入下一个配置项
且你手动选择的配置项还会存入到你电脑的 ~/.vuerc 文件中,这样子你下次创建vue项目的时候,可以选择你之前手动配置的配置,这点vue cli3做得很人性化哦!点赞!
上面的配置选择完之后,一个简单的vue项目就创建成功了。这个时候你在命令行cd hello-world,进入到hello-world项目根路径下,命令行敲下npm run serve,项目就开始跑起来啦。
再讲一下创建项目后的 目录层次吧,接图:
一个一个来:
- public目录放置ico以及你的index.html。这个目录博主我没加过其他文件,让她生让她生让她生~~~;
- src这个目录不得了了,这个是我们开发vue项目的重点目录所在。
- assets目录: 放置静态文件,例如:图片,js,svg的js等等啊,这个目录下的文件在生产环境下会被webpack copy
- components目录:放置公用vue组件页面
- styles目录:博主新增,放置重写reset.css以及阿里矢量图字体iconfont.css用
- views目录:博主用作放大模块。登录页,首页,注册页等等。
- 不知各位童鞋有没有发现博主比你们多了一个vue.config.js文件木有,这个文件更不得了啦。我们前端独立开发有个跨域问题,之前vue-cli2的proxy-table等配置在vue-cli3中哪里配置呢?
// vue.config.js
module.exports = {
// 选项...
baseUrl:"./",
outputDir:"dist",
assetsDir:"assets",
indexPath:"index.html",
filenameHashing:true,
pages:undefined,
lintOnSave:true,
runtimeCompiler:false,
transpileDependencies:[],
productionSourceMap:false,
crossorigin:undefined,
integrity:false,
devServer:{//代理
port:8086,
proxy:'http://192.168.255.201:8082'
}
}
博主目前是这样的配置做开发,没问题哦~感觉vue-cli3真的很棒哦,真香警告~~~哈哈哈。
希望可以帮助更多前端小伙伴~ 金木·晨 2018年08月28日10:50:09
vue-cli3脚手架的配置以及使用的更多相关文章
- 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求
最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...
- vue/cli3 配置vux
安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...
- vue cli3超详细创建多页面配置
1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
- vue基本指令与脚手架基本配置
脚手架(@vue/cli)创建项目启动服务 1.创建项目 vue create 项目名字 2.启动项目 进入项目根目录,运行以下命令 yarn serve 3.脚手架目录代码分析 ├── node_m ...
- @vue/cli3+配置build命令构建测试包&正式包
上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...
- VUE CLI3.X 创建项目
Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多 ...
- 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
- 安装VUE Cli3 框架方法
下面为大家介绍一下怎样安装 VUE Cli3的步骤 官网地址 https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...
随机推荐
- RT-Thread OS的启动流程
1.RT进入main之前, SystemInit函数初始化时钟. 2.main函数位于startup.c文件中.进行两个工作 系统开始前,rt_hw_interrupt_disable关闭所有中断. ...
- lwip【4】 lwIP配置文件opt.h和lwipopts.h初步分析之一
在这里先说一下这两个配置lwip协议栈文件opt.h和lwipopts.h的关系: opt.h是lwip"出厂"时原装的配置文件,它的作者是瑞士科学院的Adam等 ...
- linux cpu内存利用率获取
有了这么好的工具,我们还需要自己造轮子么? 两种情况,如果有复杂的监控需求,而且愿意花时间学习,我们可以使用nmon:但如果监控需求特殊比如说还要监控单个进程的情况,这时候就需要自己动手实现了.自己动 ...
- oracle处理重复数据
oracle查找重复记录 SELECT *FROM t_info aWHERE ((SELECT COUNT(*) FROM t_info WHERE Title ...
- web性能并发测试工具(转)
导读:随着Web 2.0技术的迅速发展,许多公司都开发了一些基于Web的网站服务,通常在设计开发Web应用系统的时候很难模拟出大量用户同时访问系统的实际情况,因此,当Web网站遇到访问高峰时,容易发生 ...
- day11会话管理
会话管理入门 2.1 生活中会话 我: 小张,你会跳小苹果码? 小张: 会,怎么了? 我: 公司年会上要表演节目,你教教我把 小张:没问题,一顿饭而已. 我: OK. ........ 在这次生活中的 ...
- 1.14不使用回车键来读取n个字符
read是一个重要的bash命令,它用于从键盘或标准输入中读取文本.可以使用read以交互的形式读取来自用户的输入,不过read能做的远不止这些.很多编程语言的输入库都是从键盘读取输入,且只有回车键按 ...
- John 尼姆博弈
John Little John is playing very funny game with his younger brother. There is one big box filled wi ...
- Codeforces617E【莫队算法+前缀异或】
题意: 给出一系列数,对每个查询区间,计算有多少个子区间异或为k. 思路: 可以先预处理异或前缀,一个区间[L,R]的异或值=sum[R]^sum[L-1]; 如果当前区间是[a,b],加一个右端点b ...
- linux文件重命名
rename 命令用字符串替换的方式批量改变文件名. 语法 rename(参数) 参数 原字符串:将文件名需要替换的字符串: 目标字符串:将文件名中含有的原字符替换成目标字符串: 文件:指定要改变文件 ...