标签：安装 try 查询 ati family res col 代码 blog
1、安装node （node -v查询版本号）
node 安装 ---- 官网下载安装
2、安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装 webpack，以全局的方式安装
npm install webpack -g
4、全局安装vue以及脚手架vue-cli（3.0以后使用的不是vue-cli，之前已经安装vue-ci的，需要先执行 npm uninstall vue-cli -g 进行卸载）
npm install @vue/cli -g --unsafe-perm （使用 @vue/cli -V 查询版本号）
5、创建vue项目 element-manage-system是你起的项目名称
vue create element-manage-system （出现选项让选择，根据需要选择创建）
见到这个提示就表示已经创建成功啦
6、运行当前项目 这个整个项目就搭建好了
npm run serve
服务起来了，这是可以在浏览器看一下页面，完美
上面已经正常启动了项目，下面说明一下公共配置
1、main.js(主文件)
import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘ //引入 vue-router
import store from ‘./store‘ //引入 vuex
// 全局配置
import ‘@/assets/scss/reset.scss‘ //全局样式
import ‘element-ui/lib/theme-chalk/index.css‘ //element-ui样式
import http from ‘@/api/config‘ //axios
import ‘./mock‘ // mockjs
// 第三方包
import ElementUI from ‘element-ui‘
Vue.use(ElementUI)
Vue.prototype.$http = http
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount(‘#app‘)
2、router(路由跳转配置)
router作用：简单理解就是帮助组件之间跳转用的。
这里为了性能都采用懒加载，还有这里不管先登陆登陆页面 默认跳转组件为 Main.vue
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
// 完整路由代码
export default new VueRouter({
routes: [
{
path: ‘/‘,
component: () => import(‘@/views/Main‘),
children: [
{
path: ‘/‘,
name: ‘home‘,
component: () => import(‘@/views/Home/Home‘),
},
{
path: ‘/user‘,
name: ‘user‘,
component: () => import(‘@/views/UserManage/UserManage‘),
},
{
path: ‘/mall‘,
name: ‘mall‘,
component: () => import(‘@/views/MallManage/MallManage‘),
},
{
path: ‘/page1‘,
name: ‘page1‘,
component: () => import(‘@/views/Other/PageOne‘),
},
{
path: ‘/page2‘,
name: ‘page2‘,
component: () => import(‘@/views/Other/PageTwo‘),
},
]
}
]
})
3、vuex(存储共享数据)
vuex作用：vuex解决了组件之间同一状态的共享问题。
export default {
//存储数据
state: {
isCollapse: false
},
//调用方法
mutations: {
collapseMenu(state) {
state.isCollapse = !state.isCollapse
}
},
actions: {}
}
4、axios
axios作用：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。
import axios from ‘axios‘
// 创建一个axios实例
const service = axios.create({
// 请求超时时间
timeout: 3000
})
export default service
基本的配置就完成了，下面可以开始进行开发啦
标签：安装 try 查询 ati family res col 代码 blog
原文地址：https://www.cnblogs.com/DeryKong/p/13646736.html
