前端项目里面包的安装
前端现代项目开发环境:node.js
前端现代项目运行环境:浏览器
前端项目包管理(包安装工具)(插件安装工具):
- npm(nodejs 自带 较慢)
- cnpm(淘宝镜像)
- yarn(较快)
全局安装
yarn npm install -g yarn
npm 和 yarn 功能一样,就是快点
前端项目包文件(两种)
- 全局包(任何都可以使用)
- 项目包(当前项目才可以使用)
初始化项目
yarn init
yarn 学习
全局安装 yarn
npm install -g yarn
创建了 testyarn 文件夹
md testyarn
切换到当前文件夹
cd testyarn
初始化项目
yarn init
包配置文件
package.json
本地项目包分为两种
- 开发环境需要的包
- 上线运行环境需要的包
包存放的文件夹 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 安装
1、执行如下命令安装
npm install -g @vue/cli
yarn global add @vue/cli
2、配置环境变量
配置到 path 里面 C:\Users\Administrator\AppData\Local\Yarn\bin
需要确定,确定后重新启动 cmd
3、vue 创建项目
cd / 切换到你需要创建项目的目录,最好 "/" 根目录
vue create 项目名称
vue create myvue
4、vue 创建项目选项
ps: 键盘 up down 键选择、enter 确定进入下一步、空格选中选项
-
default (babel, eslint)
默认 -
manually select features
自定义 -
选择如下几项
bable
ES6 转 ES5Router
路由Vuex
数据共享CSS pre-processors
css 预处理器linter/fromatter
语法格式检查(可选)
-
Use History 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 projects?
是否保存配置 y -
Save preset as: 配置名称 (base)
-
使用 yarn 还是 npm 安装
选择 yarn
5、启动 vue 项目
进入项目目录
cd myvue(项目名称)
启动项目
yarn serve
项目地址
localhost:8080
vue 项目结构
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 组件
组件包含三个重要的部分
- < template > 模板
- < script > 业务逻辑
- < style > 样式