最新版Vue-cli4.x创建项目本文章针对新手的小伙伴们 , 怎么用最新版脚手架创建项目以及掌握项目结构和配置等等.

本文章针对新手的小伙伴们 , 怎么用最新版脚手架创建项目以及掌握项目结构和配置等等.

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装

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

使用 vue --version 查看vue脚手架版本并确认是否安装成功。

vue --version

配置

运行以下命令来创建一个新项目

vue create 项目名称

输入项目名字,进行项目配置

? Please pick a preset: (Use arrow keys)
  20190907 ([Vue 2] router, less, babel, eslint) // 以前保存的自定义配置项
  Default ([Vue 2] babel, eslint)  // 默认创建Vue2项目
  Default (Vue 3) ([Vue 3] babel, eslint) // 默认创建Vue3项目
❯ Manually select features // 自意义配置项

如果选择default则会直接创建项目，创建项目包括babel\eslin这些工具，比如Router/Vuex等其他依赖需要自己手动安装。

如果选择Manually select features(手动安装)则会进入下一步选项：（这里推荐大家进行手动配置）

? Check the features needed for your project: 
 ◉ Choose Vue version 	// 选择Vue版本
 ◉ Babel 	// vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5
 ◉ TypeScript 	// typeScript通过添加类型来扩展JavaScript。
 ◯ Progressive Web App (PWA) Support 	// 渐进式Web应用程序（PWA）支持
 ◯ Router 	// 是否使用路由
 ◯ Vuex 	// 是否使用Vuex
 ◯ CSS Pre-processors 	// 是否使用CSS预处理器,比如:less、sass等
❯◉ Linter / Formatter 	// 格式化程序
 ◯ Unit Testing 	// 单元测试
 ◯ E2E Testing	// 端到端

现在项目开发如果用到TypeScript需要选择以上4个

选择版本:

? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x

是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的Class风格的话，可以选择y。

Use class-style component syntax? (y/N)

使用Babel与TypeScript一起用于自动检测的填充:

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpili
ng JSX)? (Y/n)

ESlint的配置:

Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only     //  只进行报错提醒
  ESLint + Airbnb config                //  不严谨模式
❯ ESLint + Standard config              //  正常模式
  ESLint + Prettier                     //  严格模式
  TSLint (deprecated)                   //  TypeScript格式验证工具

校验时机:

一般都会选择保存时校验，好及时做出调整，如果代码风格和ESLint校验风格差不多的话，或者比较自信比较帅的情况下，可以考虑选择提交时校验。唯唯诺诺的我，选择了第一项。

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
❯◉ Lint on save // 保存时检测
 ◯ Lint and fix on commit // 修复和提交时检测

额外选项:

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files //  存放在专用配置文件中
  In package.json //  存放在package.json中

是否保存当前配置项:

Save this as a preset for future projects? (y/N)

|-- node_modules	// 项目需要的依赖包
|-- public              // 静态资源存储目录
|   |-- index.html	// 项目主容器文件
|   |-- favicon.ico	// 项目默认索引图片
|-- src
|   |-- assets		// 放置一些静态资源文件，例如图片、图标、字体 
|   |-- components	// 公共组件目录
|   |-- views	// 业务组件目录
|   |-- App.vue		// 顶层根基路由组件
|   |-- main.js		// 主入口文件
|   |-- router.js	// 路由配置文件
|-- .editorconfig	// 代码规范配置文件
|-- .eslintrc.js	// eslint代码规范检查配置文件
|-- .gitignore		// git上传需要忽略的文件格式
|-- babel.config.js	// babel配置文件
|-- package-lock.json	// 依赖包版本锁定文件
|-- package.json	// 项目基本信息配置文件
|-- postcss.config.js	// css预处理器配置文件
|-- vue.config.js	// webpack 配置文件(与webpack.config.js作用一致)

打包相关参数

在package.json中直接配置即可

实时打包运行

npm run serve

物理打包

npm run build

打包同时生成分析报告

./node_modules/.bin/vue-cli-service build --report

浏览器相关参数

在vue.config.js中直接配置，例如

module.exports = {
  lintOnSave: true,	// 在保存代码的时候开启eslint代码检查机制
  devServer: {		// 实时保存、编译的配置段
    open:true,		// 自动开启浏览器
    port: 12306		// 服务运行端口 
  }
}

公众号.jpg