Vue CLI 3脚手架搭建
2019-02-24 本文已影响0人
二歪求知iSk2y
文档：https://cli.vuejs.org/zh/guide/installation.html
前提准备
环境：Node.js 8.9 或更高版本 (推荐 8.11.0+)
安装
npm install -g @vue/cli
创建项目
旧版本
Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果要用旧版，就全局安装安装一个桥接工具
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
image
目录结构
image
新版本
vue create project-name
image
提示选取preset预置的设置，
- 默认
- 自己选择设置
这里选择手动自己挑选设置
image
A是全选，空格是选择和取消
- TypeScript 支持使用 TypeScript 书写源码
- Progressive Web App (PWA) Support PWA 支持。
- Router 支持 vue-router 。
- Vuex 支持 vuex 。
- CSS Pre-processors 支持 CSS 预处理器。
- Linter / Formatter 支持代码风格检查和格式化。
- Unit Testing 支持单元测试。
- E2E Testing 支持 E2E 测试。
这边选择了几个最基础的。router和vuex都没选择
然后开始一步一步选择
[图片上传失败...(image-5bd960-1550980738772)]
css预处理语言，自己选择
image
自己选择linter ESLint
image
选择语法检查方式。这里选择了保存就检测
- 保存的时候检测
- 在fix和commit的时候检测
image
选择配置文件存放位置
- 独立存放
- 保存在package.json
image
完成构建
目录结构
image
vue-demo01
├── build
├── config
├── index.html
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── src
└── static
Ref:
