前端项目里面包的安装
前端现代项目开发环境 nodeJS
前端现代项目运行环境 浏览器
前端项目包管理(包安装工具)(插件安装工具)
npm(nodeJS自带 慢,慢)
cnpm(淘宝镜像)
yarn (快快)
npm install -g yarn 全局安装yarn
npm和yarn功能一样 就是快点
前端项目包文件 两种
- 全局包(任何都可以使用)
- 项目包 (当前项目才可以使用)
初始化项目 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组件
组件包含三个重要的部分
模板