使用vue-cli3

一 创建项目

1. 查看vue-cli版本

vue --version

2.卸载vue-cli 2.x版本，升级为3.x版本

npm uninstall vue-cli -g

npm install @vue/cli -g

image.png

3.创建新项目

vue create hello-world
cd hello-world
npm run serve

二.本地安装vue-router,vuex

npm install vue-router --save
npm install vuex --save

1.使用vuex

在src下新建store，store下新建index.js , actions.js , mutation.js

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const state = {}

export default new Vuex.Store({
    state,
    actions,
    mutations
})

actions.js , mutation.js

export default {
    
}

三.使用vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如下：

import Vue from 'vue'
import Router from 'vue-router'

import HelloWorld from '../components/HelloWorld'


Vue.use(Router)

const routers = [{
    path: '/',
    component: HelloWorld,
}]

export default new Router ({
    routes: routers
})

强调！！！！上面的routes不能有错误，因为写成routers不会报错但是也不会渲染。同样的坑我掉了2次！！！！

四.使用scss

1.安装

npm install -D sass-loader node-sass

2.新建scss文件
3.引入scss文件

import 'xxxxx'  或者  <style lang="scss"></style>

扩展：

• npm install -d 就是 npm install --save-dev 安装到开发环境 例如 gulp ，babel，webpack 一般都是辅助工具。
• npm insatll -s 就是npm install --save 安装到生产环境 如 vue ,react 等

五 webpack-dev-server报错问题

npm install webpack wenpack-cli --save-dev
npm install webpack-dev-server --save

六 配置路径别名

配置前：

import TodoList from '../../components/TodoList'

配置后：

import TodoList from '@/components/TodoList'

配置：
在根目录下添加'vue.config.js',并添加如下：

const path = require('path')
function resolve(dir) {
 return path.join(__dirname, dir)
}
module.exports = {
 lintOnSave: true,
 chainWebpack: config => {
  config.resolve.alias
   .set('@', resolve('src'))
   //.set('assets', resolve('src/assets'))
   //.set('components', resolve('src/components'))
   //.set('layout', resolve('src/layout'))
 }
}

使用：

import TodoList from '@/components/TodoList'

vue.config.js文件创建完后，不需要什么操作，@vue/cli-service会自己识别，如果出现报错等等，可以先尝试重启编辑器或者启动下项目。vue.config.js默认是没有的。

七 设置sass/scss全局变量

• 新建全局样式变量的文件。在assets文件夹下新建css文件夹，在css文件夹下新建_variable.scss文件用来存放scss变量。
• 配置loader。在根目录的vue.config.js文件（自己创建的）下配置如下：

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/_variable.scss";`
      }
    }
  }
}

也可引入多个全局公用样式如common.scss。则配置为：

data: `@import "@/assets/css/_variable.scss";@import "@/assets/css/common.scss";`

• 使用全局变量。完成上2步后就可以在每个vue文件中直接使用全局变量了

<template></template>
<script></script>
<style lang="scss" scoped>
button{
color: $theme-color;
}
</style>

参考：https://www.cnblogs.com/lonhon/p/9887993.html

八 引入ui框架

这里用的是element ui

• 安装。

npm i element-ui -S

• 引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

• 使用

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

九 封装axios

https://blog.csdn.net/qq_40128367/article/details/82735310

http://www.axios-js.com/docs/

十 路由拦截

https://www.jb51.net/article/149439.htm
https://blog.csdn.net/weixin_41552521/article/details/90787743

十一 配置代理

module.exports = {
    // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
    devServer: {
      proxy: {
        '/api': {
          target: '<url>',
          ws: true,
          changeOrigin: true,
          pathRewrite: { }
    }
  }
}

vue-cli3 配置官网https://cli.vuejs.org/zh/config/#devserver-proxy

十二 新建.eslintrc.js

在根目录下新建.eslintrc.js 用来处理eslint的一些报错

module.exports = {
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        "parser": "babel-eslint"
    },
}

关于eslint报错之一：

eslint报错.png

解决：vue-cli3关闭eslint

vue-cli3关闭eslint.png

十三 引入font awsome

//1.安装font-awesome
npm install font-awesome --save
//2.在main.js中引用
import 'font-awesome/css/font-awesome.css'