Vue环境步骤

系统管理员 2023-09-30 08:25 9阅读 0赞

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

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. 测试运行