2. 安装
必须先卸载全局安装的旧版本vue-cli，否则跳过此步骤：
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
操作如下：
可以看到卸载成功后，vue命令不存在
2.VueCLI2要求nodeJs≥8.9（官方推荐8.11.0+，可以使用nvm或nvm-windows在同一个笔记本中管理多个Node版本）。
3.（1）检查节点版本
（2）nodeJs的下载安装非常简单（和其他系统软件一样按照要求一步步安装）这里不做介绍，官方英文下载链接
3 安装@vue/cli
cnpm install -g @vue/cli //yarn global add @vue/cli
操作如右图：
查看版本：
vue -V //vue --version
结果如右图所示：
三、使用
1.vuecreate新建项目
（一）新项目：
*官方说明：如果您在Windows上通过minTTY使用GitBash，交互式提示不起作用，您必须通过winptyvue.cmdcreatehello-world启动此命令
vue create <Project Name> //文件名 不支持驼峰（含大写字母）
具体操作如下：
1 首先，系统将提示您选择预设：
2 自动配置，根据您的需要，使用方向键选择（按“空格键”选择/取消选择，A键全选/取消选择，I键反选）相应的功能
介绍：
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
( )Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
选择您需要的插件后，按回车键，等待创建完成。 之后，系统会提示您选择相应功能的特定工具包。 选择你擅长的或者广泛使用的（遇到问题百度一下很方便）。 简介如下
3 是否使用historyrouter：
Vue-Router利用浏览器自带的hash模式和history模式的特点来实现后端路由（通过调用浏览器提供的socket）
4css预处理器
主要针对css解决浏览器兼容性、简化CSS代码等问题
5ESLint：
提供插件式的javascript代码检查工具，ESLint+Prettier //用得比较多
6 何时测量：
7 如何保存配置：
8 是否保存本次配置（y：记录本次配置，稍后需要命名；n：不记录本次配置）：
9 构建完成
四、项目结构
精简了很多，基本用法没有太大改变
①vuex（状态管理）：
在vuecli2中：vuex是构建完成后自行npm安装的，不包含在构建过程中。 可以看到vuecli2的vuex默认文件夹（store）包含三个js文件：action（存放一些调用外部API套接字的异步执行方法css预处理器，然后commitmutations改变mutations数据）、index（初始化mutations数据css预处理器，存放的）exit ）、mutations（用于处理数据逻辑的同步执行方法的集合，commitmutations，是Vuex中改变store数据的唯一方法）
在vuecli3中：vuex是构建过程中包含的预设，供选择。 vuecli3中默认只使用一个store.js来替换原来store文件夹中的三个js文件。 动作、突变、状态和存储 getter 有多种用法
②路由器（路由）：
vuecli2：“路由器/index.js”
vuecli3：“router.js”（使用并执行相同的操作）
③去除静态并添加公用文件夹
vuecli2:static是webpack默认存放静态资源的文件夹。 打包时，会直接copy一份到dist文件夹下，不会被webpack编译
vuecli3：除了static之外，还添加了public。 vuecli3中“静态资源”的两种处理方式：
由webpack处理：JavaScript中导出的资源或模板/CSS中“相对路径”引用的资源将被编译和压缩
不被webpack处理：放置在public目录下或者通过绝对路径引用的资源将被“直接复制”，不进行任何编译和压缩处理
④index.html:
vuecli2：“index.html”
vuecli3: "public/index.html" 该模板将由 html-webpack-plugin 处理
⑤源代码/视图：
vuecli3的src文件夹增加了一个views文件夹，用于存储“页面”并区分组件（组件）
⑥删除build（根据config中的配置定义规则）、config（配置不同环境的参数）文件夹：
在vuecli3中，可以通过命令行参数或者vue.config.js中的devServer数组来配置开发服务器（在根目录下创建同名的vue.config.js文件）
⑦babel.config.js：
配置巴别塔。 VueCLI 在 Babel7 中使用新的配置格式 babel.config.js。 与 .babelrc 或 package.json 中的 babel 数组不同，此配置文件不会使用基于文件位置的方案，而是一致地应用于项目根目录下的所有文件，包括 node_modules 内的依赖项。 官方建议在 VueCLI 项目中使用 babel.config.js 而不是其他格式。
⑧根目录下的一些其他文件变化：
之前的所有配置文件都是在 vuecreate 构建时预设的，以后可以通过命令参数和 vue.config.js 进行配置
**
在根目录下新建vue.config.js，根据需要自行配置，eg：（简单配置，更多配置详情参见官网：）
module.exports = {
baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
index: {//除了 entry 之外都是可选的
entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
template: 'public/index.html',// 模板来源
filename: 'index.html',// 在 dist/index.html 的输出
title: 'Index Page',// 当使用 title 选项时,在 template 中使用：vue-cli升级到3之后，减少了很多配置文件，所有配置项都压缩到了vue.config.js文件中，所以学习和使用vue.config.js文件非常重要。
这里有一篇关于vue-cli3全面配置的文章供大家参考
vue-cli3综合配置
热更新配置
在 vue.config.js 中添加
1 chainWebpack: config => {
2 // 修复HMR
3 config.resolve.symlinks(true);
4 },
要更改css部分的热更新，还需要注释掉//extract: true,
css: {
//extract: true,// 是否使用css分离插件 ExtractTextPlugin
sourceMap: false,// 开启 CSS source maps
loaderOptions: {},// css预设器配置项
modules: false// 启用 CSS modules for all css / pre-processor files.
},
这样，热更新配置就完成了！
如有不足，希望大佬们多多指教
发表评论