vue2脚手架搭建项目:
创建一个vue项目:
1,全局安装vue命令行模块 vue-cli
npm install vue-cli -g
注意:vue-cli 依赖于webpack,在使用vue-cli之前,先安装webpack
npm install webpack -g
2**,创建项目文件夹,并在这个文件夹下打开命令行**
**3,初始化一个vue项目 **
vue init webpack
注意: 其中Eslint 选项是代码格式校验工具, 要选择NO ,否则会以严格模式校验代码,
如: 注释//后必须有且只有一个空格, 否则会报错
4,下载安装所有的依赖项
npm install
5,启动项目
npm run serve
在vue项目根目录下，index.html就是项目的首页，其他文件是项目的各种配置文件。
static文件夹，是存储静态资源文件的静态文件夹(类似于express项目中的public)
src文件夹，是存储项目源代码的文件夹（类似express项目中的bin），所有前端的代码文件都存储在src中。
build文件夹，用于存放webpack项目打包的配置文件。
config文件夹，存放服务器的配置文件。
除了src文件夹，其他文件夹中的内容基本不用修改。
开发vue项目，主要就是在src中写代码。
6,当项目完成时,如何打包发布?
(1)打包:项目开发完成之后,代码行执行命令
npm run build
编译并重新构建项目,然后在项目目录下生成一个 dist 文件夹
(2)发布: 只需要将dist文件夹中的所有内容复制到服务器(IIS / node / apache)的静态文件夹中即可
总结几种服务器的创建和启动方式
1, 基础服务器 npm init 初始化 node index 启动
2, express项目生成器 express myProject 初始化 npm start 启动
3, vue1.x/2.x项目框架 vue init webpack 初始化 npm run dev 启动
4, vue3.x项目框架 vue create project-name 初始化 npm run serve 启动
5, react项目框架 create-react-app my-app初始化 npm start 启动
6, angular框架项目 ng new app-name初始化 ng serve 启动
vue3脚手架搭建项目
一、安装 @vue/cli 脚手架
npm install -g @vue/cli
安装完成后，可以使用 vue -V （这个 V 是大写的）查看版本号
注意:@vue/cli 依赖于webpack,在使用之前,先安装webpack
npm install webpack -g
二、创建项目
vue create project-name
这里的 project-name 是自定义的项目名称，命令执行之后，会生成对应文件夹
三, 项目生成之后，已经自动安装了相关的依赖项，这时候可以直接启动项目：
npm run serve
四, 完成以上步骤之后，就已经可以开发 vue 项目了，但无法满足定制化的开发需求
这时候就需要在根目录手动创建一个 vue.config.js
// vue.config.js
module.exports = {
publicPath:'/', // 启动页地址
outputDir: 'dist', // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 启动服务后是否打开浏览器
host: '0.0.0.0',
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
}五 ,当项目完成时,如何打包发布?
(1)打包:项目开发完成之后,代码行执行命令
npm run build
编译并重新构建项目,然后在项目目录下生成一个 dist 文件夹
(2)发布: 只需要将dist文件夹中的所有内容复制到服务器(IIS / node / apache)的静态文件夹中即可参考文档：https://www.cnblogs.com/wisewrong/p/9740173.html
请求封装(练习小dem)。
// 导入请求插件
import axios from 'axios'
// 执行ajax-get请求的函数
function getRequest(url, params){
return new Promise(resolve=>{
axios.get(url,{params}).then(res=>{
resolve(res.data)
})
})
}
// 执行ajax-post请求的函数
function postRequest(url, params){
return new Promise(resolve=>{
axios.post(url,params).then(res=>{
resolve(res.data)
})
})
}
// 获取商品列表
function getGoodlist(params){
return getRequest("/myApi/goodlist", params)
}
// 登录
function doLogin(params){
return getRequest("/myApi/login", params)
}
// 注册
function doRegister(params){
return getRequest("/myApi/register", params)
}
// 一级分类标题
function getTypeOneList(params){
return getRequest("/myApi/getTypeOne", params)
}
// 搜索商品
function getSearch(params){
return getRequest("/myApi/search", params)
}
// 获取商品详情
function getDetail(params){
return getRequest("/myApi/detail", params)
}
// 同店相似商品推荐
function getSameGoods(params){
return getRequest("/myApi/sameList", params)
}
// 获取购物车数据
function getCartList(params){
return getRequest("/myApi/shopList", params)
}
// 购物车商品数量增加/添加购物车
function getCartAdd(params){
return getRequest("/myApi/add", params)
}
// 购物车商品数量减小
function getCartRemove(params){
return getRequest("/myApi/remove", params)
}
// 删除购物车商品
function getCartDelete(params){
return getRequest("/myApi/del", params)
}
// 获取轮播图图片地址
function getBannerUrl(params){
return getRequest("/myApi/banner", params)
}
// 把请求数据的函数导出
export {
doLogin,
doRegister,
getGoodlist,
getBannerUrl,
getTypeOneList,
getSearch,
getDetail,
getSameGoods,
getCartList,
getCartAdd,
getCartRemove,
getCartDelete
}请求拦截器，vuex参考：
路由配置参考：