vue脚手架创建项目
什么是vue-clivue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目以及更改对相应的webpack配置安装vue全局安装npm install vue -g局部安装npm install vue我这里采用的是全局安装安装vue-cli脚手架构建工具脚手架2.x以上npm install vue-cli -g脚手...
什么是脚手架(vue-cli)
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目以及更改对相应的webpack配置
通过脚手架创建项目
通过脚手架创建项目大致分为两类:一类是通过3.x版本的脚手架创建项目,一类是通过2.x版本的脚手架创建项目
无论是通过 3.x 还是 2.x 版本的脚手架创建项目都需要安装脚手架
脚手架的安装
首先,先说明一下,如果我们安装的是脚手架 3.x 版本,那么我们也可以使用 3.x 的脚手架通过 2.x 的方式来创建项目,但是如果安装的是 2.x 版本的脚手架是不能通过 3.x 的方式创建项目的
我这里安装的是 3.x版本的脚手架并且是全局安装
1.安装3.x版本的脚手架
npm install @vue/cli -g
2.安装 2.x 版本的脚手架
npm install vue-cli -g
3.查看脚手架的版本
vue -V
这里给出的安装脚手架命令都是全局安装,如果不想全局安装的话就把每行命令后的-g
去掉即可
全局安装脚手架之后,以后如果再创建项目的话,就不需要再重新安装脚手架了
3.x版本以上脚手架创建项目
通过脚手架 3.x 版本 创建项目有两种方式,一种是在命令框中创建项目,一种是在图形化界面创建项目
命令框创建项目
1)输入创建命令
vue create 项目名称
2)选择 Manually select features
点击回车
选择特性以创建项目,简单点来说自己的项目需要什么特性(组件、Vuex等),就可以选择哪一个来进行创建
3)选择特性
按空格选择,前面有 * 号代表已经选择
我这里只选择了 router,选择完成后点击回车
4)是否选用历史模式的路由:n
5) ESLint 选择
选择ESLint + Standard config
6) 何时进行 ESLint 语法校验
选择 Lint on save
7)babel,postcss等配置文件如何放置
选择In dedicated config files
(单独使用文件进行配置)
8)是否保存为模板
自己根据自己的情况决定,我选择 n
9)使用哪个工具安装包
选择 npm
进行安装
安装完成之后会出现如下界面
按照命令执行即可,之后会出现下面两个 url 随便哪一个在浏览器窗口打开即可
使用 ui 界面创建项目
1)输入命令
vue ui
2)进到如下界面创建项目
点击安装之后静待安装,安装完成之后执行如下操作
3.x 版本基于2.x的旧模板创建项目
在前面我们已经安装了 3.x 版本,那么你就不能使用 vue-cli2.x 版本
因为 3.x 和旧版使用了相同的vue命令,所以 2.x 被覆盖了,所以就不能使用2.x版本中的有些命令
但是如果还然想使用 2.x 的vue init功能,那么此时就需要全局安装一个桥接工具
npm install -g @vue/cli-init
安装完这个我们就可以创建项目了
1)初始化(创建)项目
vue init webpack 项目名称
此时会依次出现下面的内容
项目名称
? Project name (vue)
项目描述
? Project description (A Vue.js project)
源码解析准备
? Vue build
- Runtime+Compiler
- Runtime Only
是否安装路由
? Install vue-router?
检验你的代码是否符合规范
? Use ESLint to lint your code?
项目单元测试
? Set up unit tests (Y/n)
自动化测试
? Setup e2e tests with Nightwatch?
使用npm还是yarn
? Should we run `npm install` for you after the project has been created? (recommended)
- Yes, use NPM
- Yes, use Yarn
- No, I will handle that myself
我的选择
点击回车等待安装成功,安装成功之后根据提示执行命令,执行完,便可以在浏览器窗口输入给定的 url 查看效果
两个版本项目目录的对比
通过对比会发现,3.x 少了许多的许多的配置文件的目录(build、config等),因为 3.x 可以在根目录下新建一个vue.config.js
文件,所有的配置都会在这个文件里直接配置
vue.config.js
是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json
中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写
详见 官网是如何描述的
更多推荐
所有评论(0)