vue开发记录

vue开发记录：

项目创建 vue create 项目名 运行项目：npm run serve 项目自动开启：需要在vue.config中设置：

devServer:{
    open:true,
    host:'127.0.0.1',
    port:2323
    }
复制代码

element-ui的全局引入和按需引入：

npm install element-ui  // 安装
//在main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
复制代码

npm install babel-plugin-component -D  //安装插件
然后，将 .babelrc 修改为：
{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
复制代码

然后就可以正常使用了 sass预处理器的使用： npm i sass-loader node-sass 使用：

<style lang="scss" scoped>
.hello {
  background: yellow;
  .el-button {
    color: green;
  }
}
</style>
复制代码

less预处理器的使用： npm i less less-loader

<style lang="less" scoped>
.hello {
  background: yellow;
  .el-button {
    color: green;
  }
}
</style>
复制代码

//安装图标库
npm i font-awesome
//在main.js中引入
import 'font-awesome/css/font-awesome.min.css'
复制代码

axios的安装使用：
npm i axios -S
在main.js中引入，进行挂载
Vue.prototype.axios = axios;
复制代码

路由安装
npm i vue-router@3 -S //vue2需要安装3版本
复制代码

创建router文件，建立index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

export default new VueRouter({
    mode:'history',
    routes:[
        {
            path:'/',
            component:()=>import('@/views/Main') //按需引入，属于路由懒加载
            //component:resolve=>require('@/views/Main') 异步组件引入
        }
    ]
})
然后在main.js中引入
import router from './router'