vue-cli

Mahe666

文档：https://cli.vuejs.org/zh/guide/

全局安装vue-cli（这个是老版本的脚手架）

npm install -g vue-cli

新版本的脚手架

npm install @vue/cli

查看vue-cli版本

vue -V

查看vue版本

npm list vue

创建项目

在命令行下进入到工作空间文件夹中，输入如下命令：

vue create hello

hello是工程名（注意：工程名必须全部小写）

选择预设模板。这里选择 Manually select features（手动选择特征）
通过 ↑↓ 箭头按钮选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。

1. Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。

2. TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。

3. Progressive Web App (PWA) Support：渐进式Web应用程序

4. Router ：vue-router（vue路由）

5. Vuex ：vuex（vue的状态管理模式）

6. CSS Pre-processors ：CSS 预处理器（如：less、sass）

7. Linter / Formatter：代码风格检查和格式化（如：ESlint）

8. Unit Testing ：单元测试（unit tests）

9. E2E Testing ：e2e（end to end）测试

第一次创建工程时，可以只选择Babel和Router即可。

选择是否使用 history 形式的路由，也就是询问路径是否带 # 号，这里选择 n。
询问将依赖文件放在独立文件中，还是 package.json 中：为了保持工程配置文件的整洁性，这里选择 In package.json。
询问是否将当前选择保存以备下次使用。这里选择 n。
耐心等待

按照提示进行操作

然后启动项目

npm run serve

启动成功

按照打印出来的端口进行测试

使用可视化界面创建项目

安装好新版本的 vue-cli 后，打开cmd，输入

vue ui

就可以用可视化界面进行创建了

使用WebStorm创建Vue项目

需要注意，webstorm创建的项目可能使用的是 vue3 而不是 vue2

使用命令查看下载地址

npm config get registry

原版地址为：http://registry.npmjs.org

可以使用如下命令换成阿里的镜像地址

npm config set registry https://registry.npm.taobao.org

因为在此系统上禁止运行脚本。有关详细信息

原因：windows系统出于安全考虑，默认禁止脚本文件运行的

解决办法：设置系统允许脚本运行

win + x 以管理员身份运行 PowerShell
输入 set-executionpolicy remotesigned ，设置成 Y 即可

初始化项目

使用 webpack 初始化项目

vue init webpack 项目名

注意，初始化时需要有 @vue/cli-init 插件

npm install -g @vue/cli-init

在项目根目录下创建 vue.config.js 文件

修改项目端口号：找到项目路径下的 config/index.js 文件，在里面找 port 属性。修改成自己想要的就可以了

工程配置文件

vue-cli 3.x以上版本中为了精简配置文件，专门设置了一个可选的配置文件。只要在项目的根目录（与 package.json 同级）中，添加名称为 vue.config.js 的文件，就能自动被 vue-cli 加载。在此文件中可以配置 vue-cli 工程中的一些配置。

module.exports = {
    lintOnSave:false, //关闭代码格式化校验工具
    devServer:{
        port: 81 //修改启动端口
    }
}

工程目录结构及运行分析

package.json

这里配置了本工程中安装的模块：

"dependencies": {
	"core-js": "^3.6.5",
	"vue": "^2.6.11",
	"vue-router": "^3.2.0"
},

也配置了启动命令:

"scripts": {
	"serve": "vue-cli-service serve",
	"build": "vue-cli-service build"
},

public/index.html

这是整个工程的入口文件

注意：整个工程中只有 index.html 一个页面，所以，vue-cli工程就是一个SPA（单页应用）工程。

<div id="app"></div>

src/main.js

这是JavaScript的入口文件

首先导入了vue模块，路由模块和 App.vue 主vue组件。然后创建了一个Vue实例。

在此Vue实例中，调用了render（渲染视图函数）函数，此函数返回App.vue主组件。也就是使用 App.vue 来渲染 index.html 视图组件。

最后，使用 $mount 方法，将 index.html 中的总容器（#app）挂载到Vue实例上。

src/App.vue

<template>标签中书写当前组件html代码。这里调用了公共组件 HelloWorld。

<script>标签中书写当前组件的js代码。这里导入了 HelloWorld 公共组件成为子组件。

<style> 标签中书写当前组件的css代码。

注意：一个vue文件，就是一个Vue组件

src/components/HelloWorld.vue

这是vue-cli给我们提供的一个示例组件。至此，我们终于知道：为什么运行后浏览器中会显示这样的页面。

打包部署

我们所完成的工程，最终都是要部署到服务器（Tomcat、Nginx等等）上运行的。但是，服务器是不可能识别vue文件的，因为vue文件只是vue-cli工程中的一种自定义文件。

所以，我们需要将vue文件中的html代码、css代码、js代码抽取出来，重新打包成真正的html文件、css、文件和js文件，然后才能部署到服务器上。

在 vue.config.js 中编写如下配置

module.exports = {
    //打包基本目录
    publicPath:'./',
    //输出目录
    outputDir:'dist',
    //静态资源目录
    assetsDir:'assets',
    ... ...
}

在命令行中进入到工程目录，运行如下命令：

npm run build

在工程目录中，就会出现 "dist" 目录，这就是打包好的工程

注意：打包之后工程必须要放在一个 HTTP 服务器中才能运行。