vue项目开发流程

1.创建项目

	1.首先创建项目，我用的项目是vue 3.0
	可以在新建文件夹中cmd,进入命令符，vue create 项目名  创建项目也可以在  命令符中vue ui 在浏览器中创建项目
	2.项目安装好后，安装自己需要的各种插件，
	3.我们常用的axios（请求）、框架（后台管理系统安装element-ui，移动端安装vant） ，vuex-persistedstate（数据持久化插件），前期我们先安装这几个，后面根据项目的需要，在安装需要的插件

2.配置多环境变量

1.在package.json里配置测试，开发，生产环境

“scripts”: {
“serve”: “vue-cli-service serve --open”,
“build”: “vue-cli-service build”,
“test”: “vue-cli-service build --mode testing”
},

2.在项目中的根目录创建3个.env的文件，根据不同的环境，配置

1、.env.development 开发环境的配置

NODE_ENV=‘development’
must start with VUE_APP_
VUE_APP_ENV = ‘development’

2、.env.testing 测试环境的配置

NODE_ENV=‘production’
must start with VUE_APP_
VUE_APP_ENV = ‘staging’

3、.env.production生产环境的配置

NODE_ENV=‘production’
must start with VUE_APP_
VUE_APP_ENV = ‘production’

3.在src目录下创建一个config文件夹在文件夹中创建四个文件
env.development.js定义开发环境、env.production.js定义生产环境、env.testing.js定义测试环境，index.js根据环境的不同，引入不同配置，注（config这个文件夹下面创建的env的文件，必须要跟上面三个.env的文件名一致）
1.env.development.js文件

// 本地环境配置
// 本地环境配置
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:9018', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
  APPID: 'xxx',
  APPSECRET: 'xxx',
}

2.env.production.js文件

// 正式
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'https://www.xxx.com/', // 正式项目地址
  baseApi: 'https://www.xxx.com/api', // 正式api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx',
  $cdn: 'https://www.sunniejs.cn/static'
}

3.env.testing.js文件

module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'https://test.xxx.com', // 测试项目地址
  baseApi: 'https://test.xxx.com/api', // 测试api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx',
  $cdn: 'https://www.sunniejs.cn/static'
}

4.index.js文件

// 根据环境引入不同配置 process.env.VUE_APP_ENV
const environment = process.env.VUE_APP_ENV || 'production'
const config = require('./env.' + environment)
module.exports = config

3.配置全局sass

1.首先安装插件

npm install --save-dev node-sass
也可以指定版本
npm install node-sass@4.14.1 sass-loader@7.3.1 -save
注：也可以在创建项目中，勾选sass并下载下来，可以再项目中直接使用
<style lang="scss"> </style>

4.封装axios

1.在src下新建一个api的文件夹，在文件下创建三个js文件，api.js , http.js，index.js文件,封装axios ,方便接口的统一管理
1.api.js:里面主要统一管理接口
2.http.js:里面主要封装的是核心文件，用params封装request，设置请求拦截和响应拦截，在请求拦截里面我们可以设置请求头，设置loading动画，在响应拦截里面我们可以根据后台返回的状态码，对不同的状态码做一些操作，最后设置不同的请求方式，我一般设置的请求方式有get、post、put，等
3.index.js:主要定义方法，一个接口对应一个方法,要把前面封装好的两个文件引入到这个文件里面，然后引入到main.js全局文件里面，注册全局

5.封装vuex

1.vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储和管理程序的所有组件的数据
2.几部分组成
1.state 存储数据 在组件中的使用 this.$store.state.属性名2.mutations直接操作state中的数据在组件中的使用this.$store.commit(“方法名”,参数)
3.actions 可以实现异步操作 在actions中操作mutations中的数据 在组件使用 this.$store.dispatch("方法名"，参数)4.gettersgetters类似于计算属性可以对state中数据进行逻辑计算在组件中this.$store.getters.方法名
5.modules 将state分模块
第一步：在src文件夹下面创建store的文件夹，然后在这个文件夹下面创建四个js文件
state:定义公共数据
actions：操作异步的数据
mutations：操作同步的数据，也是唯一一个可以直接改变state里面定义的数据
getters：类似于vue组件中的计算属性，对state数据进行计算（会被缓存）
index:把前面封装好的文件都引入到这个文件里面，然后抛出

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state';
import mutations from './mutations';
import actions from './actions';
import vuexPersist from "vuex-persist";

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],
})

6.引入需要的组件，（移动端：vant-ui）（后台管理：element-ui）

安装：

npm i vant --save
npm i element-ui
安装完成后

1.全局引入
在main.js中配置（vant-ui ，element-ui）,配置完成后可以直接在项目中使用

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2.按需引入
1.在src下创建一个plugins文件夹然后下面创建一个index.js文件，里面统一管理我们需要用的组件

// 按需全局引入 vant组件
import Vue from 'vue'
import { Button, List,Card, Cell,Swipe,Grid, GridItem, SwipeItem,Tag, Tabbar,Icon,Search, TabbarItem,Overlay} from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Icon)
Vue.use(Search)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Card);
Vue.use(Tag);
Vue.use(Overlay);
Vue.use(Tabbar).use(TabbarItem)

然后在main.js全局文件里面引入

import '@/plugins/vant'

1.在plugins里创建element.js文件
在element.js文件中使用：

//按需全局引入element-ui的组件
import Vue from 'vue'
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
} from 'element-ui'

Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Autocomplete)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Menu)
Vue.use(Loading.directive)

Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

然后在main.js全局文件里面引入

import '@/plugins/element.js'

7.封装组件

首先，使用Vue.extend()创建一个组件

然后，使用Vue.component()方法注册组件

接着，如果子组件需要数据，可以在props中接受定义

最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

8.代码优化：节流防抖，函数防抖，图片懒加载，keep-alive缓存不活动的组件

1、路由懒加载
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

2、代码模块化
咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

3、for循环设置key值
在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。

4、更加理解Vue的生命周期
vue组件销毁时，会自动解绑他的全部指令及时间监听器，但是仅限于时间本身的事件，定时器的销毁需要手动去除

不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null

5、可以使用keep-alive
keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

6、节流防抖
7、图片的懒加载
使用vue-lazyload库