一.导言

Vue CLI是基于Vue.js快速开发的完整系统。有三个组件：

Cli:@ vue/由CLI全局安装的npm包在终端提供vue命令(如vue create、vue serve、vue ui等)。)

CLI服务：@ vue/CLI-服务是开发环境依赖项。构建在webpack和webpack-dev-server上(提供服务、构建和检查等命令)

CLI插件：为Vue项目提供可选功能的npm包(如Babel/TypeScript翻译、ESLint集成、单元和e2e测试等)。)

二、安装

1.如果旧版本的vue-cli(1.x或2.x)是全局安装的，请先卸载它，否则跳过此步骤：

npm卸载vue-cli -g //或纱线全局移除vue-cli的操作如下：

你可以看到我之前的版本是2.9.6。成功卸载后，vue命令不再存在。

PS: NPMWarn警告，一个依赖的咖啡脚本包可能会被重命名(咖啡脚本本身已经被删除)

2.Vue CLI 3要求NodeJs 8.9(官方推荐8.11.0，可以使用nvm或nvm-windows在同一台计算机上管理多个节点版本)。

(1)检查节点版本

(2)下载安装nodeJs非常简单(就像其他系统软件一样，根据需求一步一步安装)。这里就不介绍了。中文的官方下载地址是http://nodejs.cn/download/

3.安装@vue/cli(vue CLI 3的包名由vue-cli改为@ vue/CLI)

cnpminstall-g @ vue/CLI//纱线全局添加@ vue/CLI的操作如下：

查看版本：

vue-vue -V //vue -版本的结果如下：

第三，使用

1.vue create构建一个新项目

(1)新项目：

*官方提示：如果在Windows上通过minTTY使用Git Bash，则交互提示不起作用。您必须通过winptyvue.cmd create hello-world启动此命令。

vue创建项目名称//文件名不支持驼峰(包括大写字母)。具体操作如下：

首先，系统会提示您选择预设：

除了最后两个选项，其他选项都是你之前保存的预置配置(下图第一个“预置-配置”是我之前保存的预置配置，现在可以直接使用了):

如果没有保存配置，只有以下两个选项：

默认值(babel，eslint):

默认设置(直接输入)非常适合快速创建新项目的原型，而不需要带有任何辅助功能的npm包

手动选择特征：

手动配置(按方向键)是一个面向生产的项目，我们需要，并提供可选功能的npm包

手动配置，根据您的需要，使用方向键选择相应的功能(按“空格键”选择/取消选择，A键选择/取消选择全部)

导言：

？检查您的项目所需的功能：(按空格键选择，a切换全部，I反转选择)()babel//转码器，可以将ES6代码转换为ES5代码，这样就可以在现有环境下执行。()TypeScript//TypeScript是一个超集(后缀。(后缀。js)，它包含并扩展了JavaScript的语法，需要编译并输出为JavaScript才能在浏览器中运行。目前很少有人使用()渐进式Web app (pwa)支持//渐进式Web应用()Router//vue-Router(vue routing)()vuex//vuex(vue的状态管理模式)()CSS Pre-processors //CSS预处理器(如less、sass)() Linter/Formatter //代码样式检查和格式化(如ESlint)()Unit Testing//Unit Testing()e2e测试//e2e(端到端)测试

选择后直接输入，然后系统会提示选择特定的具有相应功能的工具包，选择自己擅长或者使用广泛的(遇到问题方便百度)。介绍如下：

是否使用历史路由器：

Vue-Router利用浏览器哈希模式和历史模式的特点，实现前端路由(通过调用浏览器提供的接口)

Hash:浏览器url地址列中的#符号(例如，此URL:http://www.abc.com/#/hello,哈希值为“#/hello”)，该哈希不包含在HTTP请求中(对后端完全没有影响)，因此更改哈希不会重新加载页面。

历史：使用HTML5历史界面中新的pushState()和replaceState()方法(需要特定的浏览器支持)。单页客户端应用程序，历史模式需要后台配置支持(详见https://router.vuejs.org/zh/guide/essentials/history-mode.html)

css预处理器

主要针对css解决浏览器兼容性、简化CSS代码等问题(* Sass诞生于2007年，最早也是最成熟的CSS预处理器语言。)

？请选择预设：手动选择功能？检查项目所需的功能：路由器，Vuex，CSS预处理器，Linter，Unit？pick a CSS预处理器(默认支持post CSS、autoprefixer和CSS模块): cs/sass//sass的安装需要Ruby环境，服务器端处理。Scss是Sass3的新语法(与CSS3完全兼容，继承了Sass函数)。LESS //Less最终会通过编译处理将CSS输出到浏览器，LESS既可以在客户端运行，也可以在服务器端运行(借助Node.js)。手写笔//手写笔主要用于支持节点项目的CSS预处理。手写笔功能更强，与js关系更密切，可以创建健壮、动态的CSS。

ESLint:

提供一个插件javascript代码检测工具

？选择一个l inter/formatter config :(使用箭头键)带有错误预防功能的eslint在lyeslint Airbnb configeslint标准config eslint pretier//上被广泛使用

何时检测：

？挑选其他lint功能：(按空格键选择，a切换全部，I反转选择) ()保存时lint//保存时检查()提交时Lint和修复//修复时检查修复和提交。

单元测试：

？选择单元测试解决方案：(使用箭头键)mochachai//mocha是灵活的，只提供简单的测试结构。如果需要其他功能，则需要添加其他库/插件。Jest //必须安装在全局环境中。安装配置简单易用。内置伊斯坦布尔，可以查看测试覆盖率。与Mocha:相比，它具有配置简单、测试代码简单、易于与巴别塔集成、内置期望丰富等特点

如何存储配置：

？你更喜欢把巴别尔、波斯特、埃斯林等的配置放在哪里？(使用箭头键)在专用的配置文件中//独立的文件放在package.json //in package.json中。

保存该配置(以后可以直接使用):

？是否将其保存为未来项目的预设？(Y/n) //y:记录这个配置，然后需要命名；注意：不要记录这个配置

(2)施工完成：

项目结构如下(不同的默认包含不同的文档，结构大致相同):

比较以前的项目包：

vs

精简只剩下灵魂，主要大的区别如下：

vuex(状态管理):

在vue cli 2中：vuex由NPM在施工完成后安装，不包括在施工过程中。可以看到，vue cli 2的vuex默认文件夹(store)包含三个js文件：action(存储一些调用外部API接口的异步方法，然后提交变更来变更变更数据)、index(初始化变更数据，是store的出口)、突变(处理数据逻辑同步执行的方法集合，也是Vuex中存储数据变更的唯一方法)

在vue cli 3中：vuex是施工过程中包含的一个预置，供选择。在vue cli 3中，默认情况下，只使用一个store.js，而不是原始store文件夹中的三个js文件。有许多作用、突变、状态和存储获取的用法，例如：

例如：store.js

从“Vue”导入Vue；从“Vuex”导入Vuex；//从“”引入vueximport存储。/store//register store vue . use(Vuex)；//使用vuexexport defaultnewvuex . store({ state : {//初始化state count33600}，对3360进行必要的修改{//处理状态增量(state，payload) {state。count=payload . step | | 1；} }，actions: {//提交更改后的状态增量(context，param){ context . state . count=param . step；Context.commit ('increment '，context . state.count)//提交更改后的state . count值}、incrementStep({state，commit，Rootstate }){ if(Rootstate . count 100){ store . dispatch(' increment '，{//call increment())方法步骤：10})}})，例如：

main.js:

从“vue”导入Vue从“App”导入。/App.vue“从导入路由器”。/router“从导入存储”。/store' //引入状态管理store vue . config . production tip=false newvue({ router，store，//register store(这可以将store的实例注入所有子组件)render3360h=h (app)})。$ mount(“# app”)视图/home.vue:

模板div class='home '！-use count-hello world d : msg=' count '//div/template script import hello world from ' @/components/hello world . vue ' import { map actions，MapState } from ' vuex '/register action和state export default { name : ' home '，computed : {//map store . state . count在此。使用与计算中其他属性相同的方法.mapstate (['count'])，}，created () {this。incrementstep()；}，methods: {//这里介绍的是动作中的方法，和方法中的其他方法是一样的.映射操作(['增量步骤'])，}，组件： { hello world } }/脚本路由器：

vue cli 2:“路由器/index.js”

vuecli 3:“router . js”(同样的用法和做法)

删除静态并添加公共文件夹

Vuechli 2: Static是webpack中默认存储静态资源的文件夹。打包时，副本将直接复制到dist文件夹，而无需由webpack编译

武则天：弃静加公。vue cli 3中“静态资源”的两种处理方法：

Webpack处理：在JavaScript中导入的资源或模板/CSS中“相对路径”引用的资源将被编译和压缩

没有webpack处理：放置在公共目录中或由绝对路径引用的资源将被“直接复制”，而不需要任何编译和压缩处理

index.html:

vue CLI 2:“index . html”

Vuechli 3:“公共/索引. html”该模板将由html-webpack-plugin处理

src/视图：

在vue cli 3的src文件夹中，添加了一个新的视图文件夹来存储“页面”和区分组件

删除构建(根据配置中的配置定义规则)和配置(配置不同环境的参数)文件夹：

在vue cli 3中，您可以通过命令行参数或vue.config.js中的devServer字段来配置开发服务器(在根目录中创建一个同名的新文件)

babel.config.js:

配置巴别塔。Vue CLI使用了Babel 7中新的配置格式babel.config.js。不像巴别塔领域。在babelrc或package.json中，该配置文件不使用基于文件位置的方案，而是一致地应用于项目根目录下的所有文件，包括node_modules的内部依赖项。官方建议始终使用babel.config.js，而不是Vue CLI项目中的其他格式。

对根目录中其他一些文件的更改：

所有之前的配置文件都是在构建vue create时预设的，或者可以在后期通过命令参数和vue.config.js进行配置

在根目录下新建一个vue.config.js进行自我配置，例如：(简单配置，详见官网：https://cli.vuejs.org/zh/config/)

模块。导出={ baseerls : '/'，//部署应用程序时的根路径(默认为'/')，或相对路径(有使用限制)outputDir: 'dist '，//运行时生成的生产环境生成文件的目录(默认为' dist ' '，将在构造前清除)assesdir: ' '。//放置生成的静态资源(s、css、img、字体)的目录(相对于outputDir)(默认为' ')indexpath3360' index.html '。//指定生成的index.html的输出路径(相对于outputDir)也可以是绝对路径。Pages : {//Pages中配置的路径和文件名必须存在于您的文档目录中，否则启动服务将报告错误。index: {//是Entry :' src/index/main.js '，//page的可选条目。每个“页面”都应该有一个对应的JavaScript入口文件模板：‘public/index . html’。//模板来源为filename :‘index . html’。//在dist/index.html的输出title :“index page”中，//使用title选项时，使用：title %=html webpackplugin . options . title %/title chunk 3360[“chunk-venders”、“chunk-common”、“index”]//默认情况下会包含此页面中包含的块。提取的通用块和厂商块}，子页： ' src/子页/main . js '//官方解释：使用只有条目的字符串格式时，模板会推导为' public/subpage.html '，如果找不到，会还原为' public/index.html '。输出文件名将推导为'子页. html'}，lintonsave3360true。//保存时检查productionsourceMap:true是否为true。//生产环境是否生成sourcemap文件CSS 3360 {EXTRACT 3360true。//是否使用css分离插件extracttextplugin源映射： false，//打开css源映射加载器选项： {}，//css预设配置项模块： false//为all CSS/预处理器文件启用CSS模块。}，devserver 3360 {//环境配置host3360' localhost '，port: 8080，https: false，hotOnly: false，open: true，//配置代理：以自动启动浏览器{//配置多个代理(配置一个代理： ' http://localhost 33604000 ')'/API ' : { target : ' URL '，ws:}};(3)npm跑发球跑~

Webstorm打开项目(个人习惯，也可以自己构建，直接运行)。运行后，webstorm会自动生成一个。idea文件(用于存储项目的配置信息，如版本控制信息、历史记录等。)

(4)检查运行结果：

打开浏览器，输入结果提示的地址(上图中的红框)，输入

(5)拉2.x模板(旧版本):

Vue CLI 3涵盖了Vue命令的旧版本。如果需要使用旧版本的vue init函数，可以全局安装桥接工具：

NPM install-g @ vue/CLI-init/` vueinit '的运行效果将与`[email protected]` vue init web pack my-project(6)在现有项目中安装插件(vueand command)的运行效果相同，例如：

*官方提示：vue add旨在安装和调用Vue CLI插件。这并不意味着取代普通的npm包。对于这些普通的npm包，您仍然需要选择包管理器

！官方警告：我们建议在运行vue add之前提交项目的最新状态，因为此命令可能会调用插件文件生成器，并可能会更改您现有的文件。

Vue add @vue/eslint //如果您没有@vue前缀，此命令将被更改为解析未划分的包，或者您可以使用(例如：vueadd @ foo/bar) 2。基于指定的范围创建项目。

vue ui命令行输入命令如下：

然后它会自动点击浏览器页面，并选择创建如下：

结果如下：

页面提示安装依赖项：

本地已经有一个项目包：

安装完成：你可以在这里管理(安装，删除)插件，运行和分析你的项目文件

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。