一、检查 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']),
}