几种创建vue项目的方法

如果你还没有安装 VueCLI  请执行下面的命令进行安装或是升级:
npm install --global @vue/cli

按住 shift 鼠标右键 打开PowerShell

方法一 :  vue init webpack xxx

在命令中输入以下命令创建Vue项目:

输入 vue init webpack demo727  

Project name (demo727)    项目名字 (确定则回车)

Project description (A Vue.js project)  项目描述 (确定则回车)

Author muxinzzz <[email protected]>  作者 (确定则回车)

Vue build (Use arrow keys)  构建模式，默认选择第一种
> Runtime + Compiler: recommended for most users   运行时+编译器：建议大多数用户使用
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅限运行时：大约6KB min+gzip，但模板（或任何特定于Vue的HTML）只允许在.Vue文件中使用-其他地方需要呈现函数

Install vue-router? (Y/n)  是否安装引入vue-router  建议y

Use ESLint to lint your code? (Y/n) 是否使用ESlint语法 eslint的格式验证非常严格，多一个空格少一个空格都会报错  建议n

Set up unit tests (Y/n)  否设置单元测试  建议n

Setup e2e tests with Nightwatch? (Y/n)  是否和Nightwatch建立端到端的测试  建议n

Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  是否在项目创建之后运行“npm install”(建议）
> Yes, use NPM   是的 用npm   建议默认
  Yes, use Yarn  是的 用yarn  跟npm没什么大的区别
  No, I will handle that myself  不 我要自行安装 (选择此项之后 后续仍通过npm install 再次安装) 
  
.......回车之后  等待安装

cd demo727   进入项目目录
npm run dev  运行项目

方法二 :  vue create xxx

在命令中输入以下命令创建Vue项目:
vue create toutiao-m  
回车  让你选择创建的模式  default是默认模式
建议选择手动方式  支持更多工具的自定义  Manually select featuews  
回车  接下来让你选择在项目中需要集成的工具 例如: 按空格键选中/取消
 (*) Choose Vue version
 (*) Babel   作用是把项目中es6代码转成es5  用来去兼容低版本浏览器
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router  管理项目中的路由
 (*) Vuex  管理项目中的共享数据状态
 (*) CSS Pre-processors  css处理器  sass less css处理器
 (*) Linter / Formatter  对项目中的代码进行格式化的  还有格式化校验  校验代码格式规范
 ( ) Unit Testing
 ( ) E2E Testing  
回车  接下来会问你是否使用 history 作为你的路由模式
(history模式的url比较简洁  但是兼容性不太好)  所以我们选no
回车  接下来会让你选择要使用那个css处理器
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus  
前两种都是sass  只是编译器不太一样  
从使用角度这几种大同小异 可以选择 第三种 Less
回车  接下来让你选择你的代码校验要使用哪种校验规范
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier 
  推荐选第三种
回车  接下来让你选择在什么情况下触发格式校验
  (*) Lint on save  当我们去修改保存文件的时候
  (*) Lint and fix on commit  当我们去执行 fix commit提交的时候
  这边建议两种都选上
回车  接下来让你选择 Babel, ESLint 生成的配置信息放哪
  In dedicated config files 生成独立的配置文件当中
  In package.json  是把上面的配置信息和package.json写到一起
  推荐 独立配置文件中 这样子查看和维护更加方便
回车  接下来问你Save this as a preset for future projects? (y/N)    是否将你刚才的一系列选择来保存一下  下次可快速创建全新的项目
如果需要 可以输入 y 然后起个名字  
如果不需要 输入no

回车  然后根据提示来
 cd toutiao-m
 npm run serve  
 
然后可以看到:
  - Local:   http://localhost:8080/    这是本机访问 
  - Network: http://192.168.1.6:8080/  这是局域网可以访问

方法三 : vue ui 创建项目

1. 在命令中输入  vue ui

2. 点击左上角的下拉选  选择Vue项目管理器

3. 选择要创建的文件的目录地址  点击 在此创建新项目 

4. 填写项目文件夹名称   社会中包管理器  建议npm

5. 选择 预设  我这边选择手动

6. 如下图  选择你想要的功能

1.Choose Vue version（选择版本号）在下一步配置中可以选择 2.x 或3.x
2.Babel（在webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中）
3.TypeScript（支持typeScript写源码）
4. Progressive Web App (PWA) Support（这个意思暂且不明白）
5. Router（自动配置路由）
6. Vuex（自动配置vuex 全局状态管理）
7. CSS Pre-processors（支持css预处理器）
8. Linter / Formatter（代码规范）
9. Unit Testing（支持单元测试）
10. E2E Testing（支持E2E测试）

7. 最后配置  

上一步选择了choose vue version  则在配置页可选择2.x 或者3.x

①ESLint with error prevention only 只配置使用 ESLint 官网的推荐规则

②ESLint + Airbnb config      配置使用 ESLint +Airbnb 规范

③ESLint + Standard config 通用规范  配置使用 ESLint + Standard 第三方的配置(一般选择此项) 

④ESLint + Prettier  比较漂亮的规范      Prettier 主要是做风格统一。代码格式化工具

 8. 点击下方的创建项目  则创建完成