vue2项目的初始化搭建流程

vue2项目的初始化搭建流程（详细）

文章旨在vue2项目的初始化搭建流程——包含vue-router，axios，vuex，element-ul配置使用部分

该文章vue2项目的初始化搭建流程是在node已经成功安装配置的条件下，不再展开赘述node的安装，环境配置

1.初始化vue脚手架——生成vue项目文件夹

【Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）】

具体步骤：

第一步：（在cmd管理员身份下操作）（仅第一次执行）：全局安装@vue/cli。

​ npm install -g @vue/cli

第二步：找到想要创建项目的目录，在目录路径中单击一次，然后在地址栏中输入 “cmd”（不需要引号），按下回车键，打开一个新的命令提示符窗口，然后使用命令创建项目

vue create xxxx （项目名称）

输入vue create xxxx （项目名称）命令以后，会让选择vue2，vue3版本 ——选择vue2

成功初始化项目脚手架

生成的project项目文件夹中有如下内容——即项目目录结构如下：

2.在vue.config.js文件中关闭eslint语法检查

添加 lintOnSave:false 语句

关闭eslint语法检查，避免eslint报错

3.启动项目

ctrl+~打开集成终端

切换到相应文件夹下 ——cd project

输入项目启动命令npm run serve

​ ——在package.json文件中查看启动命令【有些项目启动命令是`npm run dev】

出现以下内容，即项目启动成功

ctrl+单击 在网页打开项目（vue默认的网页内容，后期可自行修改）

4.vue-router路由的配置使用

（vue-router安装+新建router文件夹+main，app文件，router文件夹下的index.js文件配置）

vue-router安装

在ctrl+~~的集成终端操作（注意：要切换到对应的文件夹下）

命令：

npm i vue-router@3

【vue2，只能结合 vue-router 3.x 版本才能使用】

【在package.json文件中 查看安装的vue-router是否安装成功，以及vue-router的版本】

【如若不是 3.x 版本，使用npm uninstall vue-router卸载原有的Vue_router，再进行安装】

基本使用

1.在src文件夹下，新建router文件夹，用来进行路由配置操作，再在router文件夹下新建index.js文件，作为router文件夹的主文件（src/router/index.js)

2.index.js文件中：

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


Vue.use(Router);


// 导入需要路由的组件
import Home from '@/views/home.vue';
import Login from '@/views/login.vue';

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },

  {
    path: '/login',
    name: 'Login',
    component: Login
  },

];

// 创建路由实例
const router = new Router({
  mode: 'history', // 使用 history 模式，去掉 URL 中的 #
  routes // 注入路由规则
});

export default router;

【同时，在src文件夹下，新建views文件夹（有些项目叫做page文件夹）（用来存放“页面”，通常存放路由组件，components文件夹通常存放一般组件），然后根据自己的需求页面，创建views下的文件夹，文件（该例子中，建立了home首页文件夹，里面放置了index.vue主文件，建立了login登录文件夹，里面放置了index.vue主文件】

【src/views/home/index.vue 】

【src/views/login/index.vue 】

3.main文件中引入并且注册路由

引入router:

import router from ‘./router’

注册路由:

new Vue({

el: ‘#app’,

router,

render: h => h(App),

})

main文件代码如下：

import Vue from 'vue'
import App from './App.vue'

// 引入router
import router from './router'

Vue.config.productionTip = false

new Vue({
 render: h => h(App),
 router,
}).$mount('#app')

4.App.vue文件

指定展示位置

5.路由跳转测试，查看路由搭建是否成功（自行测试）

5.axios安装 配置代理

axios安装

在ctrl+~~的集成终端操作（注意：要切换到对应的文件夹下）

npm install --save axios

【在package.json文件中 查看安装的axios是否安装成功】

开启代理服务器

在Vue.js 2前端项目中开启代理服务器的主要目的是解决跨域请求的问题。跨域请求是指在浏览器中，当前端应用程序通过Ajax、Fetch或其他方式向不同域名或端口发起HTTP请求时，由于浏览器的同源策略限制，会导致请求被阻止或失败。

为了解决跨域请求的问题，可以使用代理服务器。代理服务器充当客户端和目标服务器之间的中间人，它可以在客户端发起请求时将请求转发到目标服务器，并在接收到响应后将响应返回给客户端。通过代理服务器，前端应用程序可以通过向同一域名或端口发送请求来绕过浏览器的同源策略限制。

在Vue.js 2中，可以通过配置vue.config.js文件来开启代理服务器。通过设置devServer.proxy选项，可以将特定的API请求代理到目标服务器上。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
 transpileDependencies: true,
 lintOnSave:false,
 
 //开启代理服务器:
 devServer: {
  proxy: {
   //  /api开头的请求会被代理到https://localhost:5000
   //  只要请求前缀是'/api1'，就把服务给5000这台服务器
   //  '/api1'：（请求前缀）  匹配所有以 '/api1'开头的请求路径
   '/api': {
​    target: 'https://localhost:5000',// 代理目标的基础路径
​    changeOrigin: true,//用于控制请求中的host值（向目标服务器撒谎）【当5000问代理服务器 他的端口号时候 回答5000，不回答自身真实的8080】
​    pathRewrite: {
​     '^/api': ''
​    }
​    // 把匹配到的/api1 变成空字符串（在5000里面，没有/api1路径）
   }
  }
 }
})

通过开启代理服务器，前端应用程序可以在开发环境中与目标服务器进行交互，而无需担心跨域请求的问题。这样可以更方便地进行前端开发和调试。值得注意的是，在生产环境中部署前端应用程序时，代理服务器不会生效，而是直接将API请求发送到实际的目标服务器。

6.vuex的配置使用

vuex安装

在ctrl+~~的集成终端操作（注意：要切换到对应的文件夹下）

npm install --save vuex@3

【vue2，只能结合 vuex 3.x 版本才能使用】

【在package.json文件中 查看安装的vuex是否安装成功】

搭建vuex环境

1.创建文件：src/store/index.js
index.js文件内书写代码：

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions={}
//准备mutations对象——修改state中的数据
const mutations={}
//准备state对象——保存具体的数据
const state={}

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

2.在main.js中创建vm时传入store配置项

引入store:

import store from ‘./store’

注册store:

new Vue({

el: ‘#app’,

store,

render: h => h(App),

})

main文件代码如下：

import Vue from 'vue'
import App from './App.vue'
// 引入router文件夹
import router from './router'
Vue.config.productionTip = false

//引入store
import store from './store'

new Vue({
 render: h => h(App),
 router,//注册路由：组件实例的身上多了一个$router属性
 store //注册仓库：组件实例的身上多了一个$store属性
}).$mount('#app')

7.element组件库下载，应用

element官网：https://element.eleme.cn/#/zh-CN

element安装

npm i element-ui -S

完整引入

在 main.js 中写入以下内容：

import ElementUI from ‘element-ui’; import
‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

即现在的main.js应是如下：（引入注册了router，store，引入调用了element）

import Vue from 'vue'
import App from './App.vue'
// 引入router文件夹
import router from './router'

//引入store
import store from './store'

//引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//调用element
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,//注册路由：组件实例的身上多了一个$router属性
  store //注册仓库：组件实例的身上多了一个$store属性
}).$mount('#app')

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。