一、项目创建
1、安装vue3环境
vue install -g vue@cli【vue需要是3.0以上版本，通过vue --version验证】
2、创建新项目
vue create project-name
3、运行项目
npm run serve
二、选择项目配置
1、选择配置方式：第一个为默认配置，第二个为手动配置（下键切换）
2、选择手动配置之后，你可以选择需要哪些配置项。空格是选中和取消，a键是全选，i键是反选。
这里我选择了babel转换器，Router路由，vuex状态管理，css预处理器，eslint风格检查。
3、回车之后还会有一些选项需要确认。这一项是询问是否开启路由的history历史模式，输入Y就开始历史模式，输入n就使用默认的hash哈希模式。【history模式页面跳转无需重新加载页面，但需要后台配合。hash模式使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。】
4、接下来需要选择css预处理器。【根据项目需要用到的UI组价库选择，例如：iview作为UI组件库，而它是基于less开发的，所以这里我选less。】
5、接下来需要选择eslint的配置，这里我选择的是标准配置，在保存时进行代码检查。
6、选择代码检查时间：在保存时进行代码检查
7、最后一项是选择在哪里存放Babel，postcss，eslint等配置。如果项目不大可以选择放在package.json里面。但是为了规范起见，最好还是选择第一项，放在专用的配置文件中。
8、最后还会询问你是否将本次配置作为以后的默认配置，建议N，因为每个项目的情况很可能不一样。
最后界面如此，等待进度完成，至此项目就创建完成。
三、项目配置
创建项目完成后你会发现，现在项目的文件有所不同，会发现相比于vue-cli2.0少了build与config文件夹，所以vue-cli3提供了一个可选的配置文件 ——vue.config.js。
现有文件目录如下：
|-- dist # 打包后文件夹
|-- public # 静态文件夹
| |-- favicon.ico
| |-- index.html #入口页面
|-- src # 源码目录
| |--assets # 模块资源
| |--components # vue公共组件
| |--views
| |--App.vue # 页面入口文件
| |--main.js # 入口文件，加载公共组件
| |--router.js # 路由配置
| |--store.js # 状态管理
|-- .env.pre-release # 预发布环境
|-- .env.production # 生产环境
|-- .env.test # 测试环境
|-- vue.config.js # 配置文件
|-- .eslintrc.js # ES-lint校验
|-- .gitignore # git忽略上传的文件格式
|-- babel.config.js # babel语法编译
|-- package.json # 项目基本信息
|-- postcss.config.js # CSS预处理器(此处默认启用autoprefixer)
vue.config.js配置
Vue.config.js是一个可选的配置文件，如果项目的根目录存在这个文件，那么它就会被 @vue/cli-service 自动加载。你也可以使用package.json中的vue字段，但要注意严格遵守JSON的格式来写。这里使用配置vue.config.js的方式进行处理。【详细可参考网站vue cli配置参考】
const webpack = require('webpack')
module.exports = {
//部署应用包时的基本 URL
publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
//当运行 vue-cli-service build 时生成的生产环境构建文件的目录
outputDir: 'dist',
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: 'assets',
// eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
lintOnSave: true,
//是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
runtimeCompiler: true,
// 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
productionSourceMap: true,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
},
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// webpack-dev-server 相关配置
devServer: { // 设置代理
hot: true, //热加载
host: '0.0.0.0', //ip地址
port: 8085, //端口
https: false, //false关闭https，true为开启
open: true, //自动打开浏览器
proxy: {
'/api': { //本地
target: 'xxx',
// 如果要代理 websockets
ws: true,
changeOrigin: true
},
'/test': { //测试
target: 'xxx'
},
'/pre': { //预发布
target: 'xxx'
},
'/pro': { //正式
target: 'xxx'
}
}
},
pluginOptions: { // 第三方插件配置
// ...
}
}四、项目开发
1、接口数据模拟
很多时候前端在后端接口还没有开发完成的时候，需要前端自己模拟数据，这个其实也很简单。
a、创建json文件，存放数据
首先在public文件夹下新建api文件夹，然后新建data.json文件，当然新建的文件夹和json文件名字是可以随意命名的。
{
"name": "数据名"
}注：属性名和属性值要用双引号。
b、安装axios
npm install axios然后再main.js文件中简单配置
import Axios from 'axios'
Vue.prototype.axios = Axiosc、发送请求
最后就可以请求模拟的数据了，我在我新建的index.vue文件中的mounted生命周期函数中发送请求
mounted () {
this.axios.get('/api/data.json').then((res) => {
console.log(res, 'success')
}).catch((err) => {
console.log(err, 'error')
})
}注意：请求的路径必须和刚才创建的文件路径一致，否则会报404错误。
2、优化vuex结构
a、删除store.js文件，然后在src中新建store文件夹，在该文件夹下新建index.js和getters.js文件，用modules来储存各个模块的信息，例如：创建modules/user.js文件
index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
// 在store中引入不同的模块信息
modules: {
user
},
getters
})
export default store
getters.js文件
// 有时候我们需要从state中派生出一些状态，比如筛选一组列表，并且这个筛选后的数据是有其他组件要用的。那么我们就需要把这个结果进行包装，形成共享状态。
const getters = {
token: state => state.user.token
}
export default getters
modules/user.js
// 每个模块都拥有自己的store，mutations，action，getters。
const user = {
// State是单一状态树 vuex使用单一状态树，那么就可以用一个对象来包含全部的应用层级状态。所以state就作为数据源【组件中获取：this.$store.state.count】
state: {
count: 1
},
// 更改Vuex的store中的状态的唯一方法就是提交mutations。 Vuex中的mutations就像一个事件：每个mutations都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数接受state作为第一个参数。
// 可以在mutations中注册一些事件，然后在组件中触发【this.$store.commit('add1')】
mutations: {
add1 (state) {
state.count++
},
world (state) {
state.count--
}
},
// Actions 提交的是mutations，而不是直接变更状态。
// Actions 可以包含任意异步操作。
// Actions函数接受一个与store实例具有相同方法和属性的context对象，因此可以通过context.commit来提交一个mutations。
// 组件中触发【this.$store.commit('world')；this.$store.dispatch('worldasync')】
actions: {
worldasync (context) {
setInterval(() => {
context.commit('world')
}, 2000)
}
}
}
export default user
最后在main.js文件中引入vuex即可：import store from './store/index'
3、配置及读取开发生成环境
a、在vue.config.js文件中添加配置信息
// 配置及读取开发生产环境
chainWebpack: config => {
config.plugin('define').tap(args => {
args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL)
return args
})
}b、创建开发环境文件：.env.dev
NODE_ENV = "dev"
BASE_URL = "https://easy-mock.com/mock/dev/api"c、创建生成环境文件：.env.prod
NODE_ENV = "prod"
BASE_URL = "https://easy-mock.com/mock/prod/api"d、修改package.json文件中开发和生成环境的指定mode
"serve": "vue-cli-service serve --mode dev",
"build": "vue-cli-service build --mode prod",注：可以在main.js文件中打印：console.log(process.env)；判断是否配置成功。
4、封装接口请求
a、配置alias：vue.config.js中添加属性configureWebpack
configureWebpack: () => ({
resolve: {
alias: {
'@': path.resolve('./src')
}
}
}),b、安装、封装axios：
npm install axios --savec、此处还未理解通透，下次更新
5、设置全局css样式
a、安装依赖：npm install node-sass
b、配置地址（在vue.config.js中）
css: {
loaderOptions: {
sass: {
data: '@import "@/assets/styles/global.scss";'
}
}
},c、创建scss文件，设置统一样式和变量
$background:#ff0000d、使用是需要添加lang="scss"
<style scoped lang="scss">
.title{
color: $background;
}
</style>6、使用UI组件库
a、安装npm i element-ui
b、在main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)7、mock模拟数据
a、安装mock：npm install mockjs --save-dev
b、创建mock文件夹，文件夹里面模拟数据（创建index.js文件）
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据
const postData = function () {
let articles = []
for (let i = 0; i < 10; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/news/index', 'post', postData)
c、在main.js中引入mock
require('./mock')d、在vue.config.js文件中配置接口
devServer: {
port: 8080,
before (app) {
app.post('/news/index', (req, res) => {
res.json(mockIndexData)
})
}
}e、如果想每个文件模拟一个接口数据，可以在mock/index.js中引入就可以。（不需要配置vue.config.js就可直接使用）
在mock中创建一个get.js文件，之后再index.js文件中引入。
// 引入mockjs
const Mock = require('mockjs')
const getData = () => {
return {
name: '测试数据'
}
}
Mock.mock('/news/get', 'post', getData)
require('./get')8、部署
npm run build五、功能设置
1、修改网站图标和标题
在public文件夹中有两个文件：index.html文件和favicon.ico文件，favicon.ico即为图标文件，而index.html为网页基本设置
2、配置根目录
在根目录里创建 vue.config.js这个名字的文件，在文件内写如下代码即可
let path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
}
}3、引入iview ui
安装：npm install --save iview
在main.js文件中添加
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)