安装
- node.js
- npm
- cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org - vue-cli
cnpm install vue-cli -g
或者
npm config set registry https://registry.npm.taobao.org
创建
- vue init webpack 项目名称
- npm install vue-router --save-dev
在scr/router/index.js中导入Vuerouter路由模块
import Vuerouter from 'vue-router'
//显示声明使用VueRouter
Vue.use(Vuerouter)
//配置导出路由
export default new Vuerouter({
routes: [
{
//路由路径
path: '/topage',
name: 'content',
//跳转组件
component: Content
},
{
path: '/tomain',
name: 'mainpage',
component: Main
}
]
})
在main.js文件中导入路由配置:
import router from './router'
new Vue({
el: '#app',
router, //将这个Vue对象配置路由
components: { App },
template: '<App/>'
})
npm install webpack -g
npm install webpack-cli -g
-
npm install axios
import axios from ‘axios’
import VueAxios from ‘vue-axios’
Vue.use(VueAxios, axios) -
npm i element-ui -S
安装elementUI -
npm install
-
cnpm install sass-loader node-sass --save-dev
安装sass加载器
在main.js中使用elementUI
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
render: h => h(App) //ElementUI
})
检查
执行三个命令检查环境
1.node -v
2.vue -v (没有显示版本,npm i vue-cli -g)
3.webpack-v(需要重新安装,npm install webpack -g)
三个条件满足时,运行vue init webpack demo(demo项目名)