从零开始创建企业级vue项目
安装电脑软件
编译器： vs code (hbuilderx， atom)
浏览器： chrome, ff , edge -- JS运行在浏览器中可以操控整个浏览器
运行环境： nodejs -- JS运行在nodejs中，可以操控整个电脑（包括文件和系统信息等...）
版本管理： svn || git
接口调试： postman
美术类工具：(ps pxcock..自己顺手的)
安装电脑项目环境
1. 配置npm镜像
npm config set registry https://registry.npm.taobao.org
2. 安装yarn
2.1 下载
npm i yarn -g
2.2 配置yarn环境变量
输入yarn global bin查看yarn的安装路径, CV此路径
把路径配置到系统环境变量-系统-PATH，新增粘贴即可
(让电脑识别yarn在哪里)
2.3 设置yarn镜像
yarn config set registry https://registry.npm.taobao.org
3. 下载安装脚手架
3.1 下载
yarn global add @vue/cli
3.2 创建项目
vue create 项目名
3.3 启动项目
yarn serve
4. 搭建工程化目录(规范公司项目)
assets
fonts -- 字体
imgs -- 图片
styles -- 全局样式
apis -- 请求API
components -- 公共组件
views -- 页面
router -- 路由
utils -- 工具函数
App.vue -- 入口组件
main.js -- 入口js文件
5. 安装UI框架
5.1 下载
yarn add vant -S
5.2 引入 main.js中按需引入
import { Button, Grid } from 'vant';
import 'vant/lib/index.css'
Vue.use(Button);
Vue.use(Grid);
5.3 使用
<van-xxxx></van-xxxx>
6. 配置路由
6.1 创建1级路由静态页面，配置路由
router/index.js中配置
[
{path: 'xxx', component: xxx},
{path: 'xxx', component: xxx},
{path: 'xxx', component: xxx},
...
]
6.2 合适位置放置出口
<router-view></router-view>
6.3 写到对应页面在配置二级路由
7. 书写静态页面
8. 接口调试（利用postman + axios）
9. 修改bug，需求迭代
10. 性能优化 （懒加载，物理压缩等....）
11. 打包 上线