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-clinpm 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-frame2. 抉择包管理器-npm3. 初始化git仓库默认关上4. 抉择一套预设--抉择手动5. babel-关上6. Router-关上7. Vuex-关上8. CSS Pre-processors（css预处理器）-关上9. 应用配置文件-关上10. pick a css pre-processor 下拉抉择less11. pick a linter / formatter config 下拉抉择 eslint + standard config12. lint on save-关上13. 而后点击“创立我的项目，不保留预设”

通过上述步骤，就能够静待vue根底模板下载下来，当模板下载实现后，cmd进入我的项目根目录，执行npm run serve启动我的项目，这和vue-cli 2.x版本中npm run dev启动形式不一样，启动实现，浏览器关上这个我的项目，能够看到两个简略的页面Home和About，接下来，须要对这个vue模板进行革新，在革新之前，我先来介绍一下，我的项目里各个文件的作用

先从我的项目根目录开始看起，次要有三个文件

  1. package.json 我的项目配置文件，我的项目中所需的依赖都会在这里阐明，当其他人要应用你这个我的项目时，只须要执行npm install 就能够装置这些依赖，启动我的项目了，这里解析下json文件外面dependencies和devDependencies，dependencies申明生成环境所须要的依赖，也就是我的项目打包当前这些依赖也是要打包进去的，而devDependencies代表开发环境的依赖，也就是方面你开发而加载的一些依赖，这些依赖在我的项目打包时不会放进去
  2. public文件夹 公共文件夹，在vue-cli 2.x创立的我的项目模板中，就是static这个文件夹，vue-cli 3.x创立的我的项目模板中，取而代之的就是这个public文件夹，这外面有一个index.html文件，它是提供给webpack，使其在运行和打包的时候作为模板文件应用，生成最初我的项目里的index.html
  3. src文件夹 这是我的项目的主文件夹，当前咱们开发都是在这个文件夹内实现的

再来看下这个src这个主文件夹里都有哪些文件：

  1. assets 寄存我的项目里的动态资源文件，比方图片，图标，字体文件等
  2. components 从代码里抽离出一些可复用的逻辑组成一个组件，以便咱们复用
  3. views 我的项目里的页面都放在这个文件夹里
  4. App.vue 我的项目里的根底组件（根组件）
  5. main.js 我的项目的入口文件，我的项目在开发运行或者编译的时候，都会以这个为起始点
  6. router 寄存路由文件
  7. store 寄存状态管理文件

以上就是咱们下载下来的初始vue模板的所有阐明，这里提醒一下，因为在启动vue ui（我的项目管理器）上开启了eslint代码查看，这里避免你当前写代码始终报空格和换行谬误，须要在根目录里找到.editorconfig文件和.eslintrc.js文件，批改一下

// .editorconfig.js[*.{js,jsx,ts,tsx,vue}]indent_style = spaceindent_size = 4 // 将这个我的项目默认的2改为4trim_trailing_whitespace = trueinsert_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" //     }) //   ] // },}