Vue环境步骤

命令行都需要使用管理员模式运行

1. 创建一个名为hello-vue的工程

   vue init webpack hello-vue
   

2. 创建时全部选no

3. 安装依赖

   # 进入工程目录
   cd hello-vue
   # 安装vue-router
   npm install vue-router@3.5.13 --save-dev
   # 安装element-ui
   npm i element-ui -S
   # 并安装依赖
   npm install
   # 并安装SASS加载器//这里的版本建议使用4.0.0版本
   cnpm install sass-loader@4.0.0 node-sass --save-dev
   #安装axios
   cnpm install --save vue-axios
   

4. 启动测试

   npm run dev
   

5. 进入idea（需要设置为管理员启动）

6. 删除不需要的文件夹，创建views和router两个文件夹

7. 在views中创建vue视图工具

8. 在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
       }
     ]
   });
   

9. 在main,js中配置相关，前面组测的组件要在这里导入

   示例：

   import Vue from 'vue'
   import App from './App'
   //扫描路由配置
   import router from './router'
   //导入elementUI
   import ElementUI from "element-ui"
   //导入element css
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(router);
   Vue.use(ElementUI)
   
   new Vue({
     el: '#app',
     router,
     render: h => h(App),//ElementUI规定这样使用
   })
   

10. 在App.vue中配置显示视图

11. 测试运行