探索vue2框架的世界：搭建vue2.x项目基本文件配置

基础项目架构

一、环境配置

1. 安装node
2. 安装cnpm(cnpm是npm的"廉价平替"提高安装速度)npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 安装vue脚手架cnpm install -g @vue/cli
4. 查询vue脚手架版本vue -V // @vue/cli 4.5.15
5. 创建项目 vue create xxxx

二、脚手架基本文件配置

1. main.js 全局入口文件基本配置

   • 全局文件，用来注册全局使用的组件和插件

   import Vue from 'vue'
   import store from './store' // vuex
   import VueBus from 'vue-bus'; // vue-bus
   import App from './App.vue'
   import ElementUI from 'element-ui'// element
   import 'element-ui/lib/theme-chalk/index.css'//element样式文件
   import Antd from 'ant-design-vue';
   import 'ant-design-vue/dist/antd.css';
   
   import router from './router' // 路由
   import './apiWay' // axios的提交方式（get、post、file.......）
   import "./assets/iconfont/iconfont.css" // iconfont图标样式
   import vueCropper from 'vue-cropper'// 图片剪裁
   import "./assets/css/common.scss" // 自定义公共样式
   import utils from "./assets/js/utils" //引入公用方法
   import validation from "./assets/js/validation" // 引入自定义验证
   import './mock' // mock数据
   // 需要注意的是
   // ant-design-vue最好单独引入，否则会导致项目运行很慢，电脑很卡！！！
   import { Table } from 'ant-design-vue'//ant-design-vue
   import 'ant-design-vue/lib/table/style/css' // 加载 ant-design table CSS
   Vue.use(Table);
   
   Vue.config.productionTip = false; 
   Vue.use(ElementUI);
   Vue.use(Antd);
   Vue.use(utils);
   Vue.use(validation);
   Vue.use(VueBus);
   Vue.use(vueCropper);
   
   new Vue({
     router,
     store,
     render: h => h(App),
   }).$mount('#app');
   
   

2. vue.config.js文件基本配置

   // vue.config.js  定制主题使用
   const hostUrl = "106.52.186.37"; //服务器
   // nginx映射的文件路径 http://106.52.186.37:8083/
   const HOST = {
   	'anyu': 'http://' + hostUrl + ':10010',
   	'file': 'http://106.52.186.37:8083/'
   }
   // 代理服务器配置
   module.exports = {
   	devServer: {
   		port: 8080,
   		proxy: {
   			'/api/anyu': {
   				target: HOST['anyu'] + '/api/',
   				pathRewrite: {
   				'^/api': ''
   				},
   				ws: false,
   				logLevel: "debug",
   				changeOrigin: true
   				}
   		 }
   	},
   	// 配置自定义环境变量
   	chainWebpack: config => {
   		config.plugin('define').tap(args => {
   			args[0]["process.env"].VUE_APP_HOST = JSON.stringify(HOST);
   			return args
   		})
   	},
   	// 配置地图
   	configureWebpack:{
   		externals:{
   			'BMap': 'BMap',
   			'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
   		}
   	}
   }
   
   

3. babel.config.js文件基本配置

   • npm install --save-dev @babel/core @babel/cli @babel/preset-env

   • 相当于一个中介，一边是用户，另一边是浏览器。这几年，JavaScript 发生了很大的变化，许多新特性在很多浏览器里都不支持。Babel 的主要作用就是规避这些问题，可以确保 JavaScript 代码兼容所有的浏览器

     module.exports = {
       presets: [
         '@vue/cli-plugin-babel/preset'
       ],
       plugins: [
         ['import', {
       	libraryName: 'vant',
       	libraryDirectory: 'es',
       	style: (name) => `${name}/style/less`
         }, 'vant']
       ]
     }
     
     

4. package.jsonnpm包版本文件

   • 记录当前项目所依赖模块的版本信息，更新模块时锁定大版本号（版本号的第一位），不能锁定后面的小版本

5. package-lock.jsonnpm包版本文件

   • package-lock.json 是在 npm install时候生成一份文件。记录了node_modules目录下所有模块（包）的名称、版本号、下载地址、及这个模块又依赖了哪些依赖。
   • package.json 和 package-lock.json 的区别
     • npm5以前，没有package-lock.json这个文件。package.json文件会记录项目中所依赖的所有npm包，当拉取项目代码，执行npm install安装npm依赖包时，都会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有就直接下载，已有的就检查更新。
     • 因为package.json只能锁定模块的大版本号（版本号的第一位），不能锁定后面的小版本，所以你每次重新npm install时候拉取的都是该大版本下面最新的版本。一般我们为了稳定性考虑我们不能随意升级依赖包，因为如果换包导致兼容性bug出现很难排查，这样很容易出现问题，所以package-lock.json就是来解决包锁定不升级问题的。
     • 另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记录。
     • npm5以后， package-lock.json文件锁定所有模块的版本号，包括主模块和所有依赖子模块。当你执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。通过package-lock.json可以直接表明下载地址和相关依赖，就无需再从package.json逐个分析包的依赖项，因此会大大加快安装速度 * 因此，正因为有了package-lock.json文件锁定版本号，所以当你执行npm install的时候，node不会自动更新package.json文件中的模块，必须用npm install [email protected]（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。

6. dist打包文件

   • npm run build 编译后的编译文件，内含html文件，css文件，js文件和静态资源

7. node_modulesnpm包放置文件

   • 第三方npm包放置目录，拿到项目后npm install进行安装后自动生成。

   • npm install xxx 手动安装的第三方npm包也会放入node_modules中

   • 安装后，可直接引入npm包进行使用，例如，import axios from 'axios'

8. public静态文件资源

   • 静态图片资源，如favicon.ico
   • 单页面文件 index.html

9. assets图片静态资源

10. eslintrc.js 代码书写规范设置

    • alt+Shift+f
    • vscode 下载 eslint插件
    • npm i eslint -D / eslintrc.js
    • vue.config.js中把lintOnSave改为true

11. utils文件夹用于收藏公共方法

安装vue全家桶

• 需要在main.js文件中注册并挂在到Vue实例中

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store/index'
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
  

12. 安装vue-router

    npm install vue-router --save
    // 配置/router/index.js文件
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter);
    
    const routes = [{
            path: '/',
            name: 'Login',
            component: () => import('@/views/Login.vue')
        },
        {
            path: '/login',
            name: 'Login1',
            component: () => import('../views/Login.vue')
        },
        // 父级路由
        {
            path: "/index",
            // name: "pageSet.md",
            component: () => import("@/views/Index.vue"),
            children: [
                // 默认欢迎页面
                {
                    path: "/",
                    name: "welcome",
                    component: () => import("@/views/Welcome.vue"),
                },
                // 欢迎页面
                {
                    path: "welcome",
                    name: "welcome1",
                    component: () => import("@/views/Welcome.vue"),
                },
            ]
        }
    ]
    
    const router = new VueRouter({
        routes
    })
    /* 避免到当前位置的冗余导航 */
    const originalPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push(location) {
        return originalPush.call(this, location).catch(err => err)
    }
    
    export default router
    

13. 安装Vuex公共状态仓库

    • 安装：npm install vuex --save

    • 创建文件夹store

    • 创建文件index.js

      import Vue from "vue";
      import Vuex from "vuex";
      import user from './modules/user' //引入子模块	  
      Vue.use(Vuex);
      
      const store = new Vuex.Store({
        state:{},  
        mutations:{}, 
        getters:{},
        actions:{},
        modules: {
          user,
        }
      });
      
      export default store;
      

安装组件和插件

14. 安装第三方ui组件库element-ui 和 ant-design-vue

• 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

     npm i element-ui -S
     npm install --save ant-design-vue
     //脚手架版本不够运行不了 ，安装1.7.8版本
     //npm install [email protected] -s
  

15. 安装axios和mockjs

    • 在vue-lic脚手架中安装mockjs,实现前后端分离开发

    npm install axios --save 
    npm install mockjs --save-dev
    
    

16. /mock/index.js 虚拟ajax请求

      import Mock from 'mockjs'
      
      // 仅用于配置 Ajax 请求
      Mock.setup({
        timeout: '300-600'
      })
      
      // 登录拦截
      Mock.mock('login', 'post', function () {
          return{
              "httpStatus":200,
              "message":"登录成功"
          }
      });
      
      export default Mock
    

17. /apiWay/index.js axios的提交方式，也可放入utils文件夹中

     // axios的提交方式（get、post、file.......）
     import Vue from 'vue'
     import axios from 'axios'
     import router from "../router"
     
     const instance = axios.create();
     
     instance.interceptors.response.use(
         (res) => {
             // !res.data.hasOwnProperty("httpStatus") 头像接口
             // 200正常接口
             if (res.data.httpStatus == 200 || !Object.prototype.hasOwnProperty.call(res.data, 'httpStatus')) {
                 return res
             }      
             res.data.message && Vue.prototype.$message.error(res.data.message)
             return Promise.reject(res)
         },
         (err) => {
             if (err.response.status && err.response.status == 403) {
                 window.localStorage.removeItem("rtoken")
                 router.push("/login")
             } 
             return Promise.reject(err.response)
         }
     );
     
     /* 请求mock数据 */
     const mock = (url, data = {}) => {
         let method = data.method || "post";
         delete data.method;
     
         return instance({
             // url: "/api/" + url,
             url: url,
             data: data,
             method: method,
             headers: {
                 "rtoken": localStorage.getItem("rtoken"),
                 "client": "managerAy",
                 "Content-Type": "application/json;charset=UTF-8",
             }
         })
     };
     
     Vue.prototype.$api = {
         mock,
     };
    // 需要注意的是**
    //  要是想走mock数据，需要将请求参数中的url:'/api/'+url变为**url:url**,之所以写url: "/api/" + url,是因为请求后台数据接口要求需要在接口前带/api/。
    

18. 安装less 和 less-loader

* 完成less安装后，代码一运行就报错
* 原因：vue版本过低导致报错；
* 解决方法：尝试将less和less-loader的版本降低。
```javascript
npm install less less-loader --save-dev
npm install [email protected] -s
npm install [email protected] -s
```

19. 安装sass 和 sass-loader

    npm install sass sass-loader --save-dev
    

• 安装完成后，运行时出现了如下的错误：Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
• 原因：因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行。
• 解决方法：

    方法一：
    找到package.json文件，里面的 "sass-loader"的版本更换掉 就行了。
    将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",
    这时候重新跑项目，就运行成功了。
    方法二：
    也可以先卸载当前版本，然后安装指定的版本
    npm uninstall sass-loader  //卸载当前版本   
    npm install [email protected] --save-dev   //安装
  

需要注意的是：

• 加 --save 就可以让项目中的其他人不用再使用此命令安装一次了，即其他人在拉取项目的时候就将安装包自动保存了。

• 卸载相关依赖的 npm 包 npm uninstall vue vue-router vuex axios