zoukankan      html  css  js  c++  java
  • 新建webpack-vue项目以及引入element ui组件

      1、用命令创建webpack模板项目

        vue init webpack 项目名,需要选是否的统一选否,所以的依赖手动添加

        

       2、安装依赖

        vue-router,element ui ,sass-loader,node-sass,vue-axios插件

        安装路由:npm install vue-router

        安装element ui: npm i element-ui -s

        安装sass加载器:npm install sass-loader node-sass 

        安装vue-axios: npm install  axios  vue-axios(npm install  --save axios  vue-axios)

       安装好以上插件再执行:npm  install

          安装好vue-axios后,要在main.js中引入vue-axios模块

          

           axios使用说明:https://www.kancloud.cn/yunye/axios/234845

          注意如果使用的是axios(npm install --save axios ),在main.js中是如下配置和vue-axios是不一样的  

          import Vue from 'vue'

          import axios from ‘axios’

          Vue.prototype.$http = axios

            vue.prototype:实例上挂载属性/方法,例如Vue.prototype.axios = axios;

            vue.use:引入插件,例如vuex,vue.use(vuex)

       路由的配置和webpack-simple模板的类似

        1)创建路由表

          在src中 创建router文件夹,里面创建index.js,此时该文件就是一个路由表、

          

           2)在main.js中配置路由表

              vue-router表示全局使用路由模块

            

            

           3)在app.vue中创建路由视图

            

        

      3、启动工程

        npm run dev

         

        

  • 相关阅读:
    暑假周总结02
    音乐播放器
    setInterval、控制停止和继续
    暑假周总结01
    ul li、a标签的下划线
    innerHTML、document获取对象、className修改样式
    领扣(LeetCode)N叉树的层序遍历 个人题解
    领扣(LeetCode)两句话中的不常见单词 个人题解
    领扣(LeetCode)二叉树的中序遍历 个人题解
    领扣(LeetCode)用队列实现栈 个人题解
  • 原文地址:https://www.cnblogs.com/jimmy2019/p/13961509.html
Copyright © 2011-2022 走看看