Vue CLI 3脚手架搭建

文档：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预置的设置，

1. 默认
2. 自己选择设置

这里选择手动自己挑选设置

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:

• https://www.cnblogs.com/vsmart/p/10399919.html
• https://www.jianshu.com/p/5e13bc2eb97c