Vue搭建项目

下载node

一路下一步

http://nodejs.cn/download/

安装NodeJS之后使用npm来安装包使用的是国外的地址，经常会出现超时错误，可以通过修改为国内的淘宝源来加速安装。

npm install -g cnpm -registry=https://registry.npm.taobao.org

如果想取消这一配置可执行

npm config set registry https://registry.npmjs.org

安装vue-cli脚手架

#安装
cnpm install -g @vue/cli
# 查看是否安装成功
vue -V 
@vue/cli 5.0.8

创建项目

vue create 项目名称

全局引入elementui

npm i element-ui -S

引入 Element
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

¶完整引入
在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

安装vue-router

npm i vue-router@3.2.0

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

在当前文件夹下新建router文件夹，在该文件中新建index.js 设置管理路由

在src目录下新建view来管理页面组件

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router' // 引入路由

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from '../views/Home.vue'
Vue.use(VueRouter)

const routes=[
    {
        path:'/',
        name:'Home',
        component:Home
    }
]

const router = new VueRouter({
    mode:'history',
    routes
})

export default router

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>