Vue 的配置

前端项目里面包的安装

前端现代项目开发环境：node.js

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

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

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 安装

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 确定进入下一步、空格选中选项

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

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