Vue+elementUI

创建工程

1. 创建一个项目

   vue init webpack 项目名
   

2. 安装依赖，我们需要安装vue-router、elment-ui、sass-loader、node-sass 四个插件

   # 进入工程目录
   cd 项目名
   # 安装 vue-router
   npm install vue-router --save-dev
   # 安装 element-ui
   npm i element-ui -s
   # 安装依赖
   npm install
   # 安装 SASS 加载器
   cnpm install sass-loader node-sass --save-dev
   # 启动测试
   npm run dev
   

   ---

   npm命令解释：

   • npm install moudleName：安装模块到项目目录下
   • npm install -g moudleName：-g的意思是将模块安装到全局。具体安装到磁盘的哪个位置，要看npm config prefix 的位置
   • npm install -save moudleName：--sace的意思是将模块安装到项目目录下，
   • 并在package文件的devDependencies节点写入依赖，-S为该命令的缩写
   • npm install -save-dev moudleName e：--save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

   使用

   1. 用idea打开改成创建好的项目，先把多余的代码删除

   2. 创建两个包，分别是router和views

   3. views包下的Main.vue

      <template>
        <h1>首页</h1>
      </template>
      
      <script>
          export default {
              name: "Main"
          }
      </script>
      
      <style scoped>
      
      </style>
      

      views包下的Login.vue

      <template>
        <div>
          <el-input
            placeholder="请输入内容"
            v-model="input"
            :disabled="true">
          </el-input>
        </div>
      </template>
      <script>
          export default {
              name:"Login",
              data() {
                  return {
                      input: ''
                  }
              }
          }
      </script>
      

      router包下的index.js (写路由)

      import Vue from 'vue'
      import Router from 'vue-router'
      
      import Main from "../views/Main";
      import Login from "../views/Login";
      
      Vue.use(Router);
      
      export default new Router({
        routes:[
          {
            path:"/main",
            component:Main
          },
          {
            path: "/login",
            component: Login
          }
        ]
      })
      

      views包下的main.js（引入刚才写的路由）

      import Vue from 'vue'
      import App from './App'
      
      import router from './router'
      
      import ElementUI from 'element-ui';
      import 'element-ui/lib/theme-chalk/index.css';
      
      Vue.use(router);
      Vue.use(ElementUI);
      
      new Vue({
        el: '#app',
        router,
        render: h => h(App)   //ElementUI
      })
      

      App.vue

      <template>
        <div id="app">
          <router-link to="/login">首页</router-link>
          <router-link></router-link>	//展示页面
        </div>
      </template>
      
      <script>
      
      export default {
        name: 'App',
      }
      </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>
      

      输入npm run dev运行一下，最终效果如下
      
      

注意：我在运行时出现了一些问题
运行时出现了Failed to mount component: template or render function not defined.报错

解决方法：package.json中的"vue-loader": "^13.3.0"，改为 ^12.1.0