共计 3648 个字符，预计需要花费 10 分钟才能阅读完成。
vue-cli 3.0 是基于 webpack 4.0 之上构建的 vue 脚手架工具，得益于 webpack4.0 的零配置个性，使得在应用 vue-cli 3.0 时，零配置就能够开发和打包 vue 我的项目
vue-cli 3.0 及更高版本为了区别 vue-cli 1.0 和 vue-cli 2.0，名字更改成了 @vue/cli，如果你的电脑曾经装置了比方 vue-cli 2.0，须要卸载它，而后装置 @vue/cli，不必放心装置了更高版本的 vue-cli 不能兼容老我的项目，比方用 vue-cli 2.0 创立的我的项目，启动和打包还是别离应用 npm run dev 和 npm run build 即可
vue --version // 查看电脑上已装置的 vue-cli 的版本
npm uninstall vue-cli -g // 卸载老版本 vue-cli
npm install -g @vue/cli // 装置 3.0 版本的 vue-cli
mac 电脑卸载和装置 vue-cli 形式如下：
sudo chmod -R 777 /usr/local/lib/node_modules/ // 放开权限
sudo npm uninstall vue-cli -g // 卸载老版本
sudo npm install -g @vue/cli // 装置新版本
装置结束，在 cmd 中输出 vue ui，启动我的项目管理器，新建一个 vue 我的项目，在这个过程须要操作步骤有：
1. 新建我的项目文件夹 -vue-base-frame
2. 抉择包管理器 -npm
3. 初始化 git 仓库默认关上
4. 抉择一套预设 -- 抉择手动
5. babel- 关上
6. Router- 关上
7. Vuex- 关上
8. CSS Pre-processors（css 预处理器）- 关上
9. 应用配置文件 - 关上
10. pick a css pre-processor 下拉抉择 less
11. pick a linter / formatter config 下拉抉择 eslint + standard config
12. lint on save- 关上
13. 而后点击“创立我的项目，不保留预设”通过上述步骤，就能够静待 vue 根底模板下载下来，当模板下载实现后，cmd 进入我的项目根目录，执行 npm run serve 启动我的项目，这和 vue-cli 2.x 版本中 npm run dev 启动形式不一样，启动实现，浏览器关上这个我的项目，能够看到两个简略的页面 Home 和 About，接下来，须要对这个 vue 模板进行革新，在革新之前，我先来介绍一下，我的项目里各个文件的作用
先从我的项目根目录开始看起，次要有三个文件
- package.json 我的项目配置文件，我的项目中所需的依赖都会在这里阐明，当其他人要应用你这个我的项目时，只须要执行 npm install 就能够装置这些依赖，启动我的项目了，这里解析下 json 文件外面 dependencies 和 devDependencies，dependencies 申明生成环境所须要的依赖，也就是我的项目打包当前这些依赖也是要打包进去的，而 devDependencies 代表开发环境的依赖，也就是方面你开发而加载的一些依赖，这些依赖在我的项目打包时不会放进去
- public 文件夹 公共文件夹，在 vue-cli 2.x 创立的我的项目模板中，就是 static 这个文件夹，vue-cli 3.x 创立的我的项目模板中，取而代之的就是这个 public 文件夹，这外面有一个 index.html 文件，它是提供给 webpack，使其在运行和打包的时候作为模板文件应用，生成最初我的项目里的 index.html
- src 文件夹 这是我的项目的主文件夹，当前咱们开发都是在这个文件夹内实现的
再来看下这个 src 这个主文件夹里都有哪些文件：
- assets 寄存我的项目里的动态资源文件，比方图片，图标，字体文件等
- components 从代码里抽离出一些可复用的逻辑组成一个组件，以便咱们复用
- views 我的项目里的页面都放在这个文件夹里
- App.vue 我的项目里的根底组件（根组件）
- main.js 我的项目的入口文件，我的项目在开发运行或者编译的时候，都会以这个为起始点
- router 寄存路由文件
- store 寄存状态管理文件
以上就是咱们下载下来的初始 vue 模板的所有阐明，这里提醒一下，因为在启动 vue ui（我的项目管理器）上开启了 eslint 代码查看，这里避免你当前写代码始终报空格和换行谬误，须要在根目录里找到.editorconfig 文件和.eslintrc.js 文件，批改一下
// .editorconfig.js
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4 // 将这个我的项目默认的 2 改为 4
trim_trailing_whitespace = true
insert_final_newline = true
// .eslintrc.js
rules: {'indent': ['error', 4], // 新增这一行代码
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
vue.config.js 文件
你会发现通过 vue-cli 3.x 创立的我的项目里没有这个文件，是因为最开始我讲到了基于 webpack4.0 个性 0 配置个性，在应用 vue-cli 3.0 创立我的项目的时候，webpack 的配置均被暗藏了，老版本的 vue-cli，创立的我的项目，咱们能够找到 build 和 config 这两个文件夹，然而 vue-cli 3.x 创立的我的项目曾经没有这两个文件夹，当须要笼罩原有配置时，须要在根目录下新建 vue.config.js 文件，来配置新的配置，当我的项目启动当前 vue.config.js 会被主动加载
// vue.config.js
/* 如果以后是生产环境 production
如果我的项目部署到域名（www.baidu.com）根目录下，间接 '/' : '/',
如果须要部署到（www.baidu.com/iview-admin）目录下，间接 '/iview-admin/' : '/'
如果是开发环境，间接 '/' : '/' */
const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin/' : '/'
/* 引入 node 的 path 模块 */
const path = require('path')
/* 自定义办法 resolve */
const resolve = dir => {return path.join(__dirname, dir);
}
// 引入 webpack
// const webpack = require('webpack')
module.exports = {
lintOnSave: false, // 敞开 eslint 查看
/* webpack 配置 */
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // 用 @代替 src，在我的项目里你须要引入文件的时候，只须要 @/api,@/config,@/mock... 即可
.set('_c', resolve('src/components')) // 用_c 代替 src/components, 咱们须要引入组件时，只须要_c/HelloWorld.vue 即可
},
// 打包时不生成 map 文件，这样缩小打包的体积，并且放慢打包的速度
productionSourceMap: false,
// 跨域配置
devServer: {
/* 主动关上浏览器 */
open: true,
hot: true, // vue cli3.0 敞开热更新
// liveReload: false, // webpack liveReload 敞开
/* 设置为 0.0.0.0 则所有的地址均能拜访 */
host: '0.0.0.0',
port: 4000,
// proxy: 'http://localhost:4000', // 通知开发服务器，将任何未知申请（没有匹配到动态文件的申请），都代理到这个 url 上，来满足跨域的申请
},
// configureWebpack: {
// plugins: [
// new webpack.ProvidePlugin({
// $:"jquery",
// jQuery:"jquery",
// "windows.jQuery":"jquery"
// })
// ]
// },
}
