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

@德玛玩前端

已于 2023-12-29 14:07:22 修改

阅读量1k

点赞数 27

分类专栏： Vue 文章标签： javascript 前端 vue vue.js 前端框架

于 2023-12-20 12:59:54 首次发布

本文链接：https://blog.csdn.net/Code_King006/article/details/135105360

版权

Vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

基础项目架构

一、👍环境配置

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

二、👍脚手架基本文件配置

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');

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'
		}
	}
}

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']
  ]
}
```
package.jsonnpm包版本文件
- 记录当前项目所依赖模块的版本信息，更新模块时锁定大版本号（版本号的第一位），不能锁定后面的小版本
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 packagename@x.x.x（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。
dist打包文件
- npm run build 编译后的编译文件，内含html文件，css文件，js文件和静态资源
node_modulesnpm包放置文件
- 第三方npm包放置目录，拿到项目后npm install进行安装后自动生成。
- npm install xxx 手动安装的第三方npm包也会放入node_modules中
- 安装后，可直接引入npm包进行使用，例如，import axios from 'axios'
public静态文件资源
- 静态图片资源，如favicon.ico
- 单页面文件 index.html
assets图片静态资源
eslintrc.js 代码书写规范设置
- alt+Shift+f
- vscode 下载 eslint插件
- npm i eslint -D / eslintrc.js
- vue.config.js中把lintOnSave改为true
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')

安装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

安装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;

安装组件和插件

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

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

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

安装axios和mockjs
- 在vue-lic脚手架中安装mockjs,实现前后端分离开发
```
npm install axios --save 
npm install mockjs --save-dev
```

/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

/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/。

安装less 和 less-loader

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

安装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 sass-loader@7.3.1 --save-dev   //安装

需要注意的是：

加 --save 就可以让项目中的其他人不用再使用此命令安装一次了，即其他人在拉取项目的时候就将安装包自动保存了。
卸载相关依赖的 npm 包 npm uninstall vue vue-router vuex axios

@德玛玩前端

关注

27
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
探索vue2框架的世界：搭建vue2.x项目基本文件配置

这几年，JavaScript 发生了很大的变化，许多新特性在很多浏览器里都不支持。Babel 的主要作用就是规避这些问题，可以确保 JavaScript 代码兼容所有的浏览器。加 --save 就可以让项目中的其他人不用再使用此命令安装一次了，即其他人在拉取项目的时候就将安装包自动保存了。推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。axios的提交方式，也可放入utils文件夹中。安装后，可直接引入npm包进行使用，例如，第三方npm包放置目录，拿到项目后。
复制链接

扫一扫

专栏目录