项目的搭建

一、检查 vue-cli 的版本

此处的 V 是大写
vue -V	

下载 Vue-cli 的命令

npm install -g @vue/cli   
cnpm install -g @vue/cli

卸载 Vue-cli 的命令

npm uninstall -g @vue/cli

二、创建项目 – 命令框版

创建项目名称

vue create 项目名称

设置项目为手动操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HgClsO10-1657726861678)(…/…/AppData/Roaming/Typora/typora-user-images/image-20220712153227074.png)]

(*) Choose Vue version
(*) Bable
( ) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing        ---测试工具
( ) E2W Testing         ---测试工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p0y9yNrJ-1657726861687)(…/…/AppData/Roaming/Typora/typora-user-images/image-20220712160942613.png)]

创建后的得到源文件框架 - 只用于开发

发布上线：运行命令：npm run build ，生成运行版本: dist/ 目录下，放到服务器

或者

通过 npm run serve 命令启动项目

node_modules	>>> 存放静态依赖
public			>>> 静态资源目录
		index.html		>>> 入口页面
src				>>> 项目源码目录
		assets			>>> 项目资源目录
		components		>>> 通用公共组件
		router			>>> 路由配置
		store			>>> vue-x 仓库
		views			>>> 视图层
		App.vue			>>> Vue 组件入口根组件
		main.js			>>> 主入口 js 文件
		

运行原理

1、用户通过浏览器发送请求，服务器响应，提供下载整个应用程序
2、下载完毕，连接中断
3、浏览器打开项目首页 index.html
4、浏览器内核开始解析运行脚本
5、第一次打开：执行main.js入口文件，在执行过程中，会先完成App.vue根组件的创建
6、加载路由器，整合vue-router 和 vue 两个框架
7、加载状态管理 vue-x ，整合vue-x 和 vue 两个框架
8、创建 vue 实例，填充所有资源内容
9、调用加载方法，绑定html 内容

三、配置组件整合Element-ui 框架

整合 Element-ui 框架

通过命令进行下载

npm i element-ui -s

整合方式分为两种

第一种 >>> 全局 >>> 整合 Element-ui 的方法

在 main.js 中将 Element-ui 引入到 vue 全局中

import Vue from 'vue';
// 导入 Element-UI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

// 将 Element-UI 绑定到全局
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

第二种 >>> 局部 >>> 整合 Element-ui 的方法

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

第一步 >>> 安装 babel-plugin-component：

npm install babel-plugin-component -D

第二步 >>> 创建一个 plugins 目录 并在其内部 创建 element.js 文件

第三步 >>> 进入main.js 中引入 element.js 文件

import './plugins/element.js'

第四步 >>> 在 element.js 中引入需要使用的组件，这样可以减小引用的 elementUI 的大小

以下为 element.js 中的书写语法

// 导入Vue 框架
import Vue from 'vue'

// 通过
import {
	Button,
	Form,
	FormItem
} from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)

Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

四、配置整合 Axios

第一步 >>> 通过命令安装 Axios

cnpm install axios -s

第二步 >>> 在 src 目录下，创建 axios 目录，创建 index.js 文件，在文件中写入

// 【axios】配置
// 导入依赖
import axios from 'axios'

// 导出
export default axios.create({
	baseURL: 'http://localhost:8888',
	timeout: 2000
})

第三步 >>> 再 axios 目录下对不同的动态资源接口文件进行搭建

以下以商品模块为例演示 get 请求

// 【商品模块-接口操作】
// 导入依赖
import http from './index.js'

// 获取0元购商品
export function getNopay_api(num) {
	// 返回promise对象
	return http.get('/goods/nopay?num=' + num)
} // 加下划线api是为了方便区分，这里是找服务器的 没有就属于仓库

//获取首页推荐商品
export function getRecommendList_api(){
	//返回Promise对象
	return http.get('/goods/recommend')
}

// 获取规格和口味
export function getFlavorList_api(){
  //返回Promise对象
  return http.get('/goods/flavor')
}
export function getSpecsList_api(){
  //返回Promise对象
  return http.get('/goods/specs')
}


//获取商品搜索列表
export function getGoodsList_api(flavor, specs){
  return http.get('/goods/list?flavor='+flavor+'&specs='+specs);
}

以下以购物车模块添加购物车信息为例，演示 post 请求

//【购物车模块-接口操作】
//导入依赖
import http from './index'

//获取购物车信息
export function getCartList_api(token, cart=[]){
  return http.post('/cart/list',{
    token,
    cart
  });
}

第四步 >>> 在需要调用接口的仓库中导入接口文件

// 导入实例语法
import {
		getCakeCarousel_api
	} from '../axios/banner'
import {
		getFlavorList_api,
		getSpecsList_api,
		getGoodsList_api
	} from '../axios/goods'

接口的使用

// 加载完毕 自动执行的函数 vue中的钩子函数
mounted() {
	// 获取轮播图
	getCakeCarousel_api().then((res) => {
		this.cakeCarouselList = res.data
	});
	//获取口味
	getFlavorList_api().then((res) => {
		this.flavorList = res.data
	});
    //获取规则
    getSpecsList_api().then((res) => {
		this.specsList = res.data
	});
	//获取商品
	getGoodsList_api(this.flavor, this.specs).then((res) => {
		this.goodsList = res.data
	});
},

// 方法
methods: {
	//映射Actions
	...mapActions('cart',['addCart']),
			
	//选择口味
	selectFlavor(id) {
		this.flavor = id
		getGoodsList_api(this.flavor, this.specs).then((res) => {
			this.goodsList = res.data
		})
	},

	//选择规格
	selectSpecs(id) {
		this.specs = id
		getGoodsList_api(this.flavor, this.specs).then((res) => {
			this.goodsList = res.data
		})
	},
			
	//添加购物车
	add(goods){
		this.addCart(goods)
	},
}

五、vue-x 仓库的配置

如有静态资源，在总仓库中进行静态资源的配置

第一步 >>> 在 src 目录下，创建 store 目录，写入主文件 index.js，以下为实例演示

写入主文件中的内容

// 加载依赖
import Vue from 'vue'
import Vuex from 'vuex'

// 加载模块
import city from './city'
import cart from './cart'

// 整合框架
Vue.use(Vuex)

// 导出
export default new Vuex.Store({
	state: {
		// 静态服务器域名
		imgURL: 'http://localhost:7777/img/'
	},
	getters: {},
	mutations: {},
	actions: {},
	modules: {
		city,
		cart
	}
})

第二步 >>> 进行子仓库的搭建，这里以城市模块为例

// 【城市地址模块】
// 加载依赖
import {
	getCityList_api,
	getDefaultCity_api
} from '../axios/city.js'
// {getCityList_api} 解构拿方法

export default {
	
	// 开启模块化
	namespaced: true,
	
	// 状态
	state: {
		defaultCity: null, 			// 默认城市
		cityList: []				// 城市列表
	},
	
	// 状态设置
	mutations: {
		// 设置默认城市
		setDefaultCity(state, city) {
			// 数据处理
			if(city.name.indexOf('全国')!=-1) {
				city.name = '全国'
			};
			state.defaultCity = city;
			window.localStorage.setItem('city', JSON.stringify(city));
		}
	},
	
	// 扩展
	actions: {
		// 获取默认城市
		getDefaultCity(context) {
			// 是否是第一次运行有没有默认城市
			if(context.state.defaultCity == null) {
				// 本地持久化储存中有吗？
				if(window.localStorage.getItem('city')) {
					// 有：迁移到程序中
					context.state.defaultCity = JSON.parse(window.localStorage.getItem('city'));
				}
				else {
					// 没有：问接口要
					getDefaultCity_api().then((res) => {
						context.state.defaultCity = res.data;
						window.localStorage.setItem('city',JSON.stringify(res.data))
					})
				}
			}
		},
		
		// 获取城市列表
		getCityList(context) {
			// 调接口方法
			getCityList_api().then((res) => {
				// 放入状态
				context.state.cityList = res.data;
			});
		}
		
	}
}

第三步 >>> 仓库的使用

导入 vuex 的总仓库

import {
		mapState,
		mapActions
} from 'vuex'

第四步 >>> 使用

对于 statas 中的数据

//计算属性
computed: {
	//映射state
	...mapState(['imgURL'])
},

对于actions 中的数据

// 方法
methods: {
	//映射Actions
    // 第一个参数是 actions 中的属性名，第二个参数是 actions 中的自定义方法名 
	...mapActions('cart',['addCart']),
}			

放入状态
context.state.cityList = res.data;
});
}

}

}

第三步 >>> 仓库的使用

导入 vuex 的总仓库

```js
import {
		mapState,
		mapActions
} from 'vuex'

第四步 >>> 使用

对于 statas 中的数据

//计算属性
computed: {
	//映射state
	...mapState(['imgURL'])
},

对于actions 中的数据

// 方法
methods: {
	//映射Actions
    // 第一个参数是 actions 中的属性名，第二个参数是 actions 中的自定义方法名 
	...mapActions('cart',['addCart']),
}