前端项目里面包的安装

前端现代项目开发环境：nodeJS

前端现代项目运行环境：浏览器

前端项目包管理（包安装工具）（插件安装工具）：

1. npm（nodeJS自带 较慢）
2. cnpm（淘宝镜像）
3. yarn（较快）

全局安装
yarn npm install -g yarn 

npm和yarn功能一样 就是快点

前端项目包文件（两种）

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

初始化项目 
yarn init

yarn 学习

全局安装yarn
npm install -g yarn

创建了testyarn文件夹
md testyarn  

切换到当前文件夹
cd testyarn  

初始化项目
yarn init       

包配置文件
package.json  

本地项目包分为两种

1. 开发环境需要的包
2. 上线运行环境需要的包

包存放的文件夹
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

配置环境变量

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

vue创建项目

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

vue创建项目选项

(键盘up down键选择)
(enter确定进入下一步)
(空格选中选项)

1. default（babel,eslint） 默认

2. manually select features 自定义

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

4. Use History mode fro Router
   用历史记录还是用hash来切换路由
   y 历史记录/n hash值

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

6. 选择Less

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

8. 选择 In package.json 包配置文件里面

9. Save this as a preset for future projects?
   是否保存配置 y

10. Save preset as: 配置名称(base)

11. 使用yarn 还是npm安装
    选择yarn

启动vue项目

进入项目目录 
cd myvue（项目名称）

启动项目 
yarn serve  

项目地址 
localhost:8080

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 > 样式

原文地址：https://www.cnblogs.com/leomessi10/p/11848353.html