探索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')
    
  1. 安装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
    
  2. 安装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;
      

安装组件和插件

  1. 安装第三方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
    
  1. 安装axios和mockjs

    • 在vue-lic脚手架中安装mockjs,实现前后端分离开发
    npm install axios --save 
    npm install mockjs --save-dev
    
    
  2. /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
    
  3. /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/。
    
  4. 安装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
```
  1. 安装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

你可能感兴趣的:(Vue,javascript,前端,vue,vue.js,前端框架)