VUE项目创建及知识点

前端项目里面包的安装
前端现代项目开发环境 nodeJS
前端现代项目运行环境 浏览器
前端项目包管理（包安装工具）（插件安装工具）
npm（nodeJS自带 慢，慢）
cnpm（淘宝镜像）
yarn （快快）

npm install -g yarn 全局安装yarn
npm和yarn功能一样 就是快点

前端项目包文件 两种

1. 全局包（任何都可以使用）
2. 项目包 （当前项目才可以使用）

初始化项目 yarn init
yarn 学习
npm install -g yarn 全局安装yarn
md testyarn 创建了testyarn文件夹
cd testyarn 切换到当前文件夹
yarn init 初始化项目
package.json 包配置文件

本地项目包分为两种
A 开发环境需要的包
B 上线运行环境需要的包

node_modules 包存放文件夹

安装包
yarn add 包名@版本 包名
yarn add jquery swiper

卸载
yarn remove 包名
yarn remove swiper

全局安装
yarn global add @vue/cli

更新插件
yarn upgrade 包名

查看全局安装地址
yarn global dir

npm全局安装地址
npm root -g

查看安装过的插件
yarn list

-----------------------------vue安装
npm install -g @vue/cli
yarn global add @vue/cli

配置环境变量
C:\Users\Administrator\AppData\Local\Yarn\bin
配置到path里面
需要确定 确定后重新启动cmd

---------------------------vue创建项目
cd / 切换到你需要创建项目的目录 最好 /根目录
vue create 项目名称
vue create myvue

----------------------------vue创建项目选项
(上下用 up down键盘)
(enter确定进入下一步)
(空格选中选项)
default（babel,eslint） 默认

manually select features 自定义

• bable ES6-转ES5
• Router 路由
• Vuex 数据共享
• CSS pre-processors css预处理器
• linter/fromatter 语法格式检查（可选）

UseHIstory mode fro Router
用历史记录还是用hash来切换路由
y 历史记录
n hash值

Pick a css Pre-processor
选择一个css预处理（编程方式处理css）

• Less

Where do you prefere placing config
把配置文件放在那儿

• In package.json 包配置文件里面

Save this as a preset for future proje
cts?
是否保存配置
y
Save preset as: 配置名称
base

使用yarn 还是npm安装

*yarn

----------------------启动vue项目
cd 项目名称
cd myvue

yarn serve 启动项目

项目地址 localhost:8080

王杰超
小米商城 html+css布局写好

django+DRF
要求resfull

登录 post
注册 post
page 首页数据接口 get
http://biger.applinzi.com/page.php
category 分类接口 get
http://biger.applinzi.com/category.php
product.php 产品接口 get
http://biger.applinzi.com/product.php?id=10000181
购物车 post /get

--------myvue 项目结构
node_modules 包与依赖存放位置
public 根模板文件
src 项目源文件
.gitigonore 当文件用git方式上传（git忽略文件）
babel.config.js ES6转es5配置文件
package.json 项目配置文件
README.md 项目说明文件
yarn.lock yarn安装相关锁定文件

-------src文件目录说明
assets 项目资源目录
components 项目组件存放地方
router 路由
store 项目数据
views 项目的页面
App.vue 项目的根组件
main.js 项目的根js

------vue-cli里面开发 组件形式 *.vue文件就是一个vue组件
组件包含三个重要的部分
模板