vue-cli 官网地址：https://cli.vuejs.org/zh/config/#publicpath
1、安装与配置
安装
安装@vue/cli脚手架（现在vue都升级为@版本了）
可以使用下列任一命令安装这个新的包：我是用的淘宝镜像，所以命令是cnpm install -g @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
image.png
检查是否安装成功/检查版本
vue --version
image.png
创建项目
创建项目命令:
vue create demo
1、输入命令，回车
image.png
我选择的是第三个，自定义。回车
2、选择需要的配置
image.png
靠数字进行指定选择 、空格单选、a全选，i反向全选。根据我个人需要，我添加了router 和 vuex。选完，回车
(1. babel
(2. TypeScript
(3. Progressive Web App (PWA) Support //支持渐进式网页应用程序
(4. Router //路由管理器
(5. Vuex //状态管理模式（构建一个中大型单页应用时）
(6. CSS Pre-processors //css预处理框架
(7. Linter / Formatter //代码风格/格式校验 Eslint 语法检查器
(8. Unit Testing //单元测试
(9. E2E Testing E2E（End To End）//E2E端对端测试
3、定义路由风格
image.png
4、Eslint配置
image.png
因为和prettier 配合起来有大量的格式报错，所以我为了个人方便选择 标准配置。
5、代码规则检测
image.png
为了防止错误积攒，我选择了第一个保存时检查。当然你对你代码很自信的话，也可以选择其他
5、Babel、ESLint等的配置存放
image.png
个人选择的是第一个，单独存放。这个看你喜好
6、这个是讲是否保存这个配置、自己看着办。我自己已经保存好了所以选择n
image.png
回车进入安装界面
image.png
安装完毕
image.png
7、进入项目目录，运行。出现以下界面，则成功。按ctrl + c可退出运行
cd demo
npm run serve
image.png
vue-cli4 版本新特性
vue-cli4 添加了界面化管理功能，可以进行界面化操作。方法是在vue-cli文件目录键入vue ui命令
image.png
image.png
vue-cli 历史版本
1、关于安装命令
安装命令
npm install -g @vue/cli //cli3.0+
npm install --global vue-cli //cli2.0
初始化项目
vue create demo //cli3.0+
vue init webpack myitem //cli2.0
运行程序
npm run serve //cli3.0+
npm run dev //cli2.0
查看vue的版本号
vue --version OR vue --V //cli3.0+
vue -v //cli2.0+
2、关于项目创建命令
vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。
vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录.
3、vue-cli4 以前安装实例
//全局安装 vue-cli 如果本机以前安装过 就无须执行避免重复安装
npm install --global vue-cli
// 安装init
npm install -g @vue/cli-init
//创建一个基于 webpack 的vue项目
vue init webpack myitem // 后续按回车安装默认即可
//进入到创建的vue项目
cd vue-iview-master
//安装依赖
npm install
//进入项目目录
cd myitem
//启动项目
npm run dev //启动成功 http://localhost:8080 即可打开测试首页
4、vue init webpack myitem一些配置说明
Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写,不然会报错。
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git，他会读取.ssh文件中的user。
Install vue-router? 是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也是一样的。
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
Should we run npm install for you after the project has been created?(recommended)npm
vue-cli4 的一些文件配置参考
1、ESLint 的规则验证相对比较严格，所以需要个人按照自己的代码习惯进行一些初始化配置。
配置vue-cli4 的配置文件在根目录下的.eslintrc.js文件中。
我个人的配置示例
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended"],
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2017, // 这个是使用 ECMAScript 6 的意思
sourceType: 'module'
},
rules: {
"no-unused-vars":0, // 关闭未使用变量检查
"no-console": "off", //关闭console 报错检查
'no-debugger': 'off', // 关闭debugger报错检查
"eqeqeq": "off", // 关闭全等检查
//"indent": ["error", "tab"],
"no-irregular-whitespace": "off", //关闭空格 检查
"no-mixed-spaces-and-tabs": "off", //关闭tab 空格 混用检查
"no-multi-spaces": "off" ,// 关闭多余空格检查
"no-unused-vars": [2, {
// 允许声明未使用变量
"vars": "local",
// 参数不检查
"args": "none"
}],
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
]
};
2、是关于跨域相关的配置问题。vue-cli4+ 是没有config 文件夹的，若需配置，则需在项目根目录下面创建vue.config.js，进行跨域配置和其他的vue-cli的项目配置。
个人配置代码参考
const webpack = require('webpack')
module.exports = {
assetsDir: "h5", //把所有样式文件用h5 装载
publicPath: process.env.NODE_ENV === 'production' ?
'/myfile' : '/', //线上线下路径，生产环境路径/测试环境路径
//应用 jquery
chainWebpack: config => {
config.plugin('provide').use(webpack.ProvidePlugin, [{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}])
},
//跨域配置
devServer: {
proxy: {
'/api': {
target: 'http://www.demo.com', //路径指向本地主机地址及端口号
port: 80, //端口
//ws: true,
changeOrigin: true, //开启跨域
pathRewrite: {
'^/api': '/myapi' //路径转发代理 /api 的意思就是 用/api 代替http://www.demo.com/myapi。
}
}
}
}
}
3、vue-cli4 修改或删除预设
C盘 搜索.vuerc 进入文件夹位置。打开修改
image.png