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"
// })
// ]
// },
}
发表回复