1.安装谷歌插件
github.com/vuejs/vue-d… 切换master分支下载
（1）进入目录 npm install
（2）npm run build 执行完
（3）将shell下的chrome，作为扩展程序添加到谷歌浏览器的扩展程序中
方法二：新建 vue-devtools目录， 运行 npm install vue-devtools，完成后进入该文件下的node_modules -> vue-devtools -> vender 文件修改manifest.json ，修改persistent 为 true。修改完成，
将 vender 拖至谷歌扩展程序。
2.安装vue-cli
npm install -g @vue/cli
3.创建项目
vue create hello-world
4.配置vscode
项目根目录下新建 .editorconfig 文件，添加下面代码
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
上述代码中，第2行设置缩进风格为空格；第3行设置缩进大小为2个字符；第4行设置自动过滤空格为true，表示打开状态；第5行设置在最后插入新行为true，表示打开状态。
5.项目根目录下新建 .eslintignore 文件
添加 下面代码src/lib/mui/js
MUI的代码在ES Lint的语法检查中不通过，为了避免报错，将MUI的js目录从语法检查中排除。
在 .eslintignore 文件中 添加不进行 ES Lint 检查的文件路径。
6. vscode安装 vuter 插件
安装完成过后，在根目录下创建 .vscode/settings.json 文件，添加代码
{
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto",
"end_with_newline": false
}
}
}
上述代码中，第2行设置vue中的js编辑器自带的ts格式进行格式化；第3行让函数（名）和后面的括号之间加个空格；第4行按用户自身习惯选择即可；第8行设置vue组件中html代码格式化样式。
格式化工具：Prettier - Code formatter vscode安装
7.安装 vue-router
执行 npm install vue-router@3.1 --save，安装之后创建文件 src/router.js，添加下面代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from './components/HelloWorld.vue'
var router = new VueRouter({
// 创建路由实例对象router
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home, name: 'home' }
]
})
export default router // 暴露路由对象属性
router.js 文件完成之后，需要在src\main.js入口文件中引入该文件，并在Vue实例上注册，如下所示。
import Vue from 'vue'
import App from './App.vue'
import router from './router.js' // add
Vue.config.productionTip = false
new Vue({
router, // add
render: h => h(App), }).$mount('#app')
})
8.安装 vuex
npm install vuex@3.1 --save，安装完成后，在main.js引入
import store from './store'
在vue实例上注册
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
创建文件 src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
modules: { }
})
9.安装mint-ui
npm install mint-ui@2.2 --save ，安装完成后，在src\main.js中引入.
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
引入后，在页面中使用“mt-”前缀来定义标签名，如<mt-button>等
10.安装mui
需要在官网下载，github.com/dcloudio/mu… ， 下载完成将代码包 css、js等资源放置在src/lib目录下；
然后在 main.js 中引入。
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'
由于MUI的代码在ES Lint的语法检查中不通过，为了避免报错，将MUI的js目录从语法检查中排除。办法：将 下面代码放在 .esintignore 中
src/lib/mui/js
11.安装sass
sass是css预处理器；scss是sass3引入的新语法。安装sass执行下面命令
npm install sass-loader@8.0 --save-dev
npm install node-sass@4.13 --save-dev // npm安装node-sass总是报错，换成cnpm不支持4.13版本，所以去掉@4.13
npm install sass@^1.3.0 --save-dev
12.安装 axios
npm install axios@0.19 --save
安装完成后，创建src\axios.js脚本文件
import axios from 'axios'
import config from './config.js'
export default {
install: function (vue) {
var obj = axios.create({
baseURL: config.baseURL
})
vue.prototype.$http = obj
}
}
规定了install方法，就可以向其他ui组件库那样，使用Vue.use()来全局使用，下面在main,js中添加
import axios from './axios.js'
Vue.use(axios)
创建src\config.js配置文件，编写如下代码
export default {
baseURL: 'http://tpadmin.test/api/'
}
13.Mock.js
- 生成随机数据，拦截 Ajax 请求
- 项目开发阶段，前端可以脱离后端的接口，模拟返回数据
// 安装
npm install mockjs
// 使用 Mock
import Mock from "mockjs";
Mock.setup({
timeout: "800-2000"
});
let baseURL = "http://vshop.test";
let postData = () => {
return {
code: 0,
data: null
};
};
export default Mock.mock(`${baseURL}/user`, "post", postData);
地址
Github源码地址和预览地址 进入
