Vue CLI叫做脚手架。CLI:Command-Line Interface,翻译为命令行界面,俗称脚手架。
如果你只是简单写几个Vue的Demo程序,那么你不需要Vue CLI。使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。
使用条件:Node8.9以上版本、NPM
如果安装过慢,可以安装淘宝镜像,通过cnpm安装。
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用cnpm命令来安装模块了。
安装脚本架
npm install -g @vue/cli 上面安装的是Vue-CLI3,安装脚手架3后,也可以使用Vue-CLI2项目
如果想创建Vue-CLI2项目
npm install @vue/cli-init -g
安装以后,通过以下命令创建Vue-CLI2项目
vue init webpack myProject 创建Vue-CLI2项目。(vue create myProject 创建Vue-CLI3项目)
yarn也是包管理工具。早期npm不好用,有几家大公司推出yarn代替npm,随着npm升级,npm已比较好用。这时有些人用npm,有些人用yarn。
创建Vue-CLI2项目
- Use ESLint to lint your code? 选择是否使用ESLint规范。我们选择Yes后出现
Standard (https://github.com/standard/standard) 此项为标准规范
Airbnb (https://github.com/airbnb/javascript) 此项为使用Airbnb公司规范
none (configure it yourself)
- Set up unit tests
询问是否安装单元测试,依赖测试框架,用的比较少,选择No
- Setup e2e tests with Nightwatch?
e2e即end to end,中文为端至端。询问是否使用Nightwatch进行端到端测试。Nightwatch是一个利用selectnum进行自动化测试的框架。直接选择No。
- 选择包管理工具NPM和Yarn,一般选择NPM。
Vue-CLI2项目目录
- build和config 都是配置文件目录,config里面定义了大量的变量。
- node_modules 存储本地信赖文件
- src 用户写代码的文件夹
- static 用户使用到的资源,会原封不动复制到dist文件夹 里面的.gitkeep表示该目录会上传到git服务器.
- .babelrc文件 如果安装了babel-preset-env模块依赖,就会生成.babelrc文件
- .editorconfig 对代码风格进行设置
- .eslintignore 指定忽略eslint检查的目录或者文件
- .gitignore 忽略上传git服务器的目录或者文件
- .eslintrc 代码检测的配置文件
- .postcssrc CSS转化的配置文件,一般不用动
- index.html 模板文件
- package-lock.json "^6.22.1",中的^指安装大于最右侧位置的版本号;"~6.22.1",中的~指安装大于中间位置的版本号;package-lock记录真实安装的版本。