Vue-Cli3.0创建项目
一、基础知识
（1）使用Vue UI创建、管理项目
（2）项目结构目录整理
（3）初始文件添加
（4）基本配置讲解
（5）跨域配置
二、使用Vue UI创建、管理项目
1、首先安装vue-cli3.0
2、终端运行vue ui
Vue UI界面介绍
Projects：表示vue项目
Create：表示创建vue项目
Import：表示导入vue项目
3、创建项目
详情
预设
功能
通常，我们一般选择一下功能：Babel,Router,Vuex,CSS Pre-processors,Linter/Formatter,使用配置文件等等
配置
是否保存预设
保存之后，可以用于下次创建项目 。
创建完成后，我们可以查看项目中的插件、依赖、配置、任务等。
三、项目结构目录整理
项目目录如下图：
解释：
vue.config.js：配置文件。
package.js：定义项目的描述，项目版本、名称、运行的脚本、依赖等等。
babelconfig.js：babel的配置文件。
.gitignore：Git提交时的忽略文件。
.eslintrc.js：配置eslint规则的文件。
public：公共文件。public/index.html：模板文件。public/favicon：图标文件。
src：开发文件。src/assets：静态文件、src/components：抽离的组件、src/iview：视图文件（页面）。
app.vue：基础组件。
main.js：入口文件。
router.js：路由文件。
store.js：vuex状态管理文件。
四、初始文件添加
对于使用vscode的开发者，可以添加编辑器配置文件（.editorconfig），并进行基本配置。
[*.{js,jsx,ts,tsx,vue}]
indent_style = tabs
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
charset = utf-8
root = true注意：配置完成之后，需要安装EditorConfig for VS Code。
五、新增文件夹/文件
api：该文件夹用于存放api接口请求。
assets/img、assets/font：分别对应放置图片、图标字体。
config：项目的配置文件夹。
config/index.js：对项目的一些配置。介绍：使用eslint语法，使用 export default { } 导出配置对象，在使用的时候直接引入即可。举例：config/index.js 在 store.js 文件中使用，代码如下：
import Vue from 'vue'
import Vuex from 'vuex'
import config from './config/index'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})directive/index.js：存储 自定义指令 的文件。
lib/util.js：与业务有关系 的方法。
lib/tools.js：与 业务没有直接关系 的方法，即 纯粹的方法。
router/router.js：原有的router.js移入router文件夹，以后放置 路由列表 。
router/index.js：将原有的router.js文件中的除路由列表以外的部分。
store/index.js：将原有的store.js文件移入store文件夹中，并重命名为index.js。注意：需要将拆分后的 state.js、mutations.js、actions.js 文件引入，并注册。如下：
store/state.js：vuex中的 state 。
store/mutations.js：vuex中的 mutations 。
store/actions.js：vuex中的 actions 。
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions
})新增模块的使用方法：
store/module/user.js：存储用户信息的模块（以user.js为例）
const state = {
}
const mutations = {
}
const actions = {
}
export default {
state,
mutations,
actions
}使用很简单，只需要在store/index.js中引入即可。如下：
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
// 引入module模板(user为例)
import user from './module/user'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
modules: {
user
}
})mock/index.js：用于数据模拟。在后端接口为提供之前，前端开发者，可以用该文件（终端：npm instal mockjs -D 安装）进行数据模拟。
import Mock from 'mockjs';
// 在这里封装接口请求......
export default Mock此时，我们新增的文件已经完成了。
六、基础文件 vue.config.js 配置
具体的名词解释，请留意代码注释。代码如下：
// 定义基础路径
const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin' : '/';
const resolve = dir => path.join(_dirname, dir);
module.exports = {
// 不保存为eslintt规范的代码
lintOnSave: false,
baseUrl: BASE_URL,
// 以下链式结构作用：指定文件路径的简化缩写。
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('_c', resolve('src/components'))
},
// 打包时不生成map文件,加快打包速度，减少体积。
prodctionSourceMap: false,
// 设置跨域转发：将任务未请求到静态文件的请求均代理到http://localhost:4000
devServer: {
proxy: 'http://localhost:4000'
}
}