第八节：Vue-cli 脚手架

第八节：Vue-cli 脚手架

Vue-cli 是官方提供的脚手架，用于快速创建一个Vue应用的开发环境，包括基本项目目录结构，文件组件渲染，项目打包，sass环境等。Vue-cli基于nodeJS环境所以需要先安装nodeJS。

1、安装nodeJS

nodeJS 官方下载地址：http://nodejs.cn/download/

打开官网，然后傻瓜式操作就可以了。

检测安装是否成功：

​ 1、window + R ,输入cmd 回车打开命令行工具。

​ 2、输入 node -v

​ 3、回车打印出当前安装的nodeJS版本号则安装成功。

​ 4、输入 npm -v npm是node自带node package manage 安装node会自带安装npm,npm没有安装包 npm是国外包。

​ 5、安装淘宝镜像

使用npm 安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

​ 6、安装yarn

yarn 是facebook（脸书）发布的一款取代npm的包管理工具，
yarn特点：
	1、速度快 yarn 缓存了每一个下载过的包，所以再次使用是无需重复下载，同时利用并行下载大量的资源利用率因此安装速度快。
	2、安装 在执行代码之前，yarn会通过算法校验每个安装的完整性。
	3、可靠性：使用详细、简洁的锁文件格式和明确的安装算法，yarn能够保证在不同系统上无差异的工作。
使用cnpm 安装yarn：
	npm install -g yarn
查看版本：
	yarn -v
	yarn --version

2、安装 Vue-cli

脚手架：

​ 已经准备好的模板，在里面写内容。脚手架版本号：2.x版本脚手架、3.x版本脚手架、4.x版本脚手架

搭建相关的环境：

安装webpack:

指令：npm i(install) webpack-cli -g(global)
简化指令：npm install webpack-cli -g
安装的时候出现问题:
	使用 npm install安装 
	使用 npm uninstall卸载 
	使用 npm uninstall webpack-cli -g 

*安装Vue-cli：*2.X版本

​ 1、输入命令 npm install -g vue-cli 回车等待安装 选择2.x版本

初始化项目：

Vue-2.X版本创建项目

	1、任意新建一个项目文件夹。

	2、命令切换到该文件夹的目录 cd <xxx:folderPath>。

	3、输入命令 vue init webpack <xxx:folderName> 回车 输入项目初始化配置 等待项目加载完成。

	4、切换到项目目录，启动项目，项目启动成功，浏览器数据提示的地址打开项目。
		cd <xxx:folderPath>
		npm run dev

打开项目：

​ 1、浏览器输入提示的地址端口。等待项目打开成功

安装Vue-cli 3.X版本以上:

安装交接工具

npm install -g @vue/cli-init

初始化项目：

Vue-3.X版本创建项目

	1、任意新建一个项目文件夹。

	2、命令切换到该文件夹的目录 cd <xxx:folderPath>。

	3、输入命令 vue create <xxx:folderName> 回车 输入项目初始化配置 等待项目加载完成。

	4、切换到项目目录，启动项目，项目启动成功，浏览器数据提示的地址打开项目。
		cd <xxx:folderPath>
		npm run serve

3、运行项目

切换项目位置

​ cd <xxx:folderName>

运行项目

​ 2.X npm run dev

​ 3.X npm run serve

4、创建项目路程 3.X为例

1、通过 vue create xiaoge-vue-demo-1 创建项目 xiaoge-vue-demo

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> basevuemodel ([Vue 2] less, babel, pwa, router, eslint) 
 xiaoge-base-project ([Vue 3] less, babel, router, vuex) 
 Default ([Vue 3] babel, eslint)
 Default ([Vue 2] babel, eslint)
 Manually select features

2、选择手动配置项目参数

Manually select features

3、选择配置需要的依赖模块

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

4、根据项目需要选择模块

(*) Babel
(*) Router
(*) Vuex
(*) CSS Pre-processors

5、选择Vue版本

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
 2.x

6、选择3.x版本

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 

7、使用历史模式路由器?(需要在生产环境中为索引回退设置适当的服务器)(Y/n)

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
 Less
 Stylus

8、选择预处理语音一般常用 less

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
 In package.json

9、配置参数信息 In package.json

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)

10、是否保存为项目模板

Vue CLI v5.0.8
✨  Creating project in C:\Users\xiaoge\Desktop\Vue2\xiaoge-01-vue.
⚙️  Installing CLI plugins. This might take a while...


> core-js@3.24.1 postinstall C:\Users\xiaoge\Desktop\Vue2\xiaoge-01-vue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

added 829 packages from 461 contributors in 15.375s

87 packages are looking for funding
 run `npm fund` for details       

🚀  Invoking generators...
📦  Installing additional dependencies...

added 22 packages from 17 contributors in 3.762s

89 packages are looking for funding
 run `npm fund` for details

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project xiaoge-01-vue.
👉  Get started with the following commands:

$ cd xiaoge-01-vue
$ npm run serve

等待安装项目 下载配置依赖

5、项目文件介绍

目录

.node_modules/ 依赖

.public/ 静态资源

.src/ 源代码

.gitignore

告知 git 那些文件或文件夹不需要添加到版本管理中

babel.config.js

Babel 是一个 JavaScript 编译器，可以对 JavaScript 文件进行转码，类似的有 ES6 转为 ES5 兼容不同的浏览器。babel.config.js是 babel 的配置文件，presets字段设定转码规则，此处 @vue/cli-plugin-babel/preset就是规则。	
module.exports = {
 presets: ['@vue/cli-plugin-babel/preset']
}

jsconfig.json

jsconfig.json源于tsconfig.json，是TypeScript的配置文件。
jsconfig.json相当于tsconfig.json的“allowJs”属性设置为true

package-lock.json

依赖下载地址

package.json

package.json文件提供了很多项目相关的信息，主要有这个项目所需要的各种模块；以及项目的配置信息（比如名称、版本、许可证等元数据）；还可以配置一些简化script执行脚本。项目中json文件是不能添加注释的，需要删除相关注释。
{
 "name": "vue-project", // 项目的名称
 "version": "0.1.0", // 项目的版本号  大版本号.小版本号.修订版本号[.日期版本号]
 "private": true, // 是否对外开发，private为true表示不对外开放
 "scripts": {
   // script配置脚本对象，表示npm run XXX
   "serve": "vue-cli-service serve", // 配置serve脚本，表示npm run serve 等同于 vue-cli-service serve 命令
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
 },
 "dependencies": {
   // 依赖的相关信息，这里主要是生产和开发依赖,一般用npm install XXX --save 安装的依赖就会添加到这里
   "core-js": "^3.6.5",
   "vue": "^2.6.11",
   "vue-router": "^3.2.0",
   "vuex": "^3.4.0"
 },
 "devDependencies": {
   // 开发依赖的相关信息，这里的主要是开发过程的依赖，生产环境中不会存在,一般用 npm install XXX --save-dev 安装的依赖会添加到这里
   "@vue/cli-plugin-babel": "~4.5.0",
   "@vue/cli-plugin-eslint": "~4.5.0",
   "@vue/cli-plugin-router": "~4.5.0",
   "@vue/cli-plugin-vuex": "~4.5.0",
   "@vue/cli-service": "~4.5.0",
   "@vue/eslint-config-prettier": "^6.0.0",
   "babel-eslint": "^10.1.0",
   "eslint": "^6.7.2",
   "eslint-plugin-prettier": "^3.3.1",
   "eslint-plugin-vue": "^6.2.2",
   "lint-staged": "^9.5.0",
   "node-sass": "^4.12.0",
   "prettier": "^2.2.1",
   "sass-loader": "^8.0.2",
   "vue-template-compiler": "^2.6.11"
 }
}

README.md

这个文件就是项目的介绍文件，使用 markdown 语法。

vue.config.js

这个文件表示 vue 的配置文件，像一些简单的前端服务运行的端口号，是否自动打开，代理地址等。下面是一些简单的配置
const path = require('path') // 导入Node的path模块

// 解析函数，在配置引入别名时用到
function resolve(dir) {
 return path.join(__dirname, dir)
}

// vue.config.js的主体配置
module.exports = {
 publicPath: '/', // 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致。
 outputDir: 'dist', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
 assetsDir: 'assets', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
 css: {
   // 对css的一些配置
   extract: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
   sourceMap: false // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
 },
 lintOnSave: process.env.NODE_ENV === 'development', // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
 devServer: {
   // 服务相关的设置
   host: '127.0.0.1', // 指定一个主机名
   port: 8000, // 指定一个端口号
   open: true, // 运行成功后是否自动打开页面
   proxy: {
     // 代理相关。如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器
     '/api': {
       // 对请求接口中出现的api进行代理
       target: process.env.VUE_APP_PROXY_URL, // 代理的目标地址，这个取值在后面的文件会讲到
       changeOrigin: true, // 是否改变域名，
       ws: false, // 是否开启webSocket
       pathRewrite: {
         // 路径重写，如果默认不重写路径，那么`/api/users`会被代理到`target路径/api/users`
         '^/api': '' // 对api进行路径重写，重写后，那么`/api/users`会被代理到`target路径/users`
       }
     }
   }
 },
 // webpack相关的配置，可以设置plugins和别名解析等
 configureWebpack: {
   // 解析设置
   resolve: {
     // 别名配置，用来创建 import 或 require 的别名，来确保模块引入变得更简单。
     alias: {
       // 用'@'表示src的路径， @/views/Home.vue 等同于 src/views/Home.vue.
       '@': resolve('src'),
       // 同理，用@components 表示 src/components目录
       '@components': resolve('src/components'),
       '@assets': resolve('src/assets')
     }
   },
   // 配置webpack的plugins
   plugins: []
 },
 // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
 productionSourceMap: false
}