创建vue工程

安装

• 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项目名）