vue-cli脚手架3.0的使用

中文文档
https://github.com/vuejs/vue-docs-zh-cn
在安装之前请装好nodeJs

1.使用

npm install -g @vue/cli
# or
yarn global add @vue/cli

 查看版本(是否安装成功):vue -V(大写的V):

vue-cli脚手架3.0的使用_第1张图片

2.命令变化:

 

 3.创建一个项目
新建文件夹,在该文件夹下打开命令窗口,输入以下命令,
vue create project-name
这时你会看见

 

 

 按键盘上下键选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了(注:现在vue-cli3.0默认使用yarn下载),这里我选择手动,

 vue-cli脚手架3.0的使用_第2张图片

 4.选择配置,这时你会看见一些选项,
你要集成什么就选就行了,我这里选个我比较常用的(注:空格键是选中与取消,A键是全选)

vue-cli脚手架3.0的使用_第3张图片

 vue-cli脚手架3.0的使用_第4张图片

 5.选择css预处理,这里我选择stylus

 vue-cli脚手架3.0的使用_第5张图片

 vue-cli脚手架3.0的使用_第6张图片

 6.选择ESLint + Prettier

vue-cli脚手架3.0的使用_第7张图片

 vue-cli脚手架3.0的使用_第8张图片

 7.选择语法检查方式,这里我选择保存就检测

 vue-cli脚手架3.0的使用_第9张图片

 vue-cli脚手架3.0的使用_第10张图片

 8.选择单元测试

 vue-cli脚手架3.0的使用_第11张图片

 vue-cli脚手架3.0的使用_第12张图片

 9.她会问你 ,把babel,postcss,eslint这些配置文件放哪,这里随便选,我选择放在独立文件夹

 vue-cli脚手架3.0的使用_第13张图片

 vue-cli脚手架3.0的使用_第14张图片

 10.键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的我保存的名字为xs-default

 vue-cli脚手架3.0的使用_第15张图片

 11.确定后,等待下载依赖模块

 vue-cli脚手架3.0的使用_第16张图片

 12.装好后,启动

 

cd vue-pro3.0-demo // 进入项目根目录
yarn serve // 启动项目

 13.项目目录,现在的目录是3.0的cli看上去简洁多了,去掉了2.0 build和config等目录

 vue-cli脚手架3.0的使用_第17张图片

 14.修改端口,在根目录下创建vue.config.js

 vue-cli脚手架3.0的使用_第18张图片

 vue.config.js相关配置请参考 https://github.com/vuejs/vue-cli/blob/dev/docs/config.md
在vue.config.js找到

 vue-cli脚手架3.0的使用_第19张图片

 vue-cli脚手架3.0的使用_第20张图片

 15.本文使用vue-cli3.0的入门使用,希望可以帮到刚更多的人。

 

你可能感兴趣的:(vue,js)