Vue - 组件化开发
零：单文件组件
1.简介
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图
但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
2.Hello.vue 的简单实例：
现在我们获得：
- 完整语法高亮
- CommonJS 模块
- 组件作用域的 CSS
- 正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如 Pug，Babel (with ES2015 modules)，和 Stylus
这些特定的语言只是例子，你可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能够帮助你提高生产力的预处理器
如果搭配 vue-loader 使用 webpack，它也能为 CSS Modules 提供头等支持
一：环境准备
1.Node.js
① Node.js 介绍
Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言
实质上，就是一个安装在操作系统之上的js解释器
后端语言和前端语言的区别：
- 运行环境：后端语言一般运行在服务器端；前端语言运行在客户端的浏览器上
- 功能：后端语言可以操作文件，可以读写数据库；前端语言不能操作文件，不能读写数据库
② 下载
2个分支
LTS：Long-Time Support，长期支持版本（推荐使用这个，比较稳定）Current：当前最新版（不推荐使用，想尝试新功能的可以试一试）
③ 安装
- 一直下一步即可，可以自定义安装路径
- 环境变量会自动添加
④ 查看版本
安装完成后，可以通过下面查看命令的版本来测试Node.js是否安装成功
node -v
2.npm
① npm 介绍
-
npm = node package manager
-
Node.js在安装完成后，在Node.js中会同时帮我们安装一个
包管理器npm -
可以借助
npm命令进行node插件的管理（包括安装、卸载、管理依赖等） -
这个工具相当于Python的pip管理器
② npm 版本查看
npm -v
③ npm的默认安装位置
# 这里的 User 是当前的登录的用户名，需要自行替换
C:\Users\User\AppData\Roaming\npm
④ npm 常用选项
| 选项 | 释义 |
|---|---|
| -g | global 全局安装 |
| -registry= | 指定镜像仓库安装 |
⑤ npm 常用命令
npm install -g [包名] # 安装模块 -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list # 查看当前目录下已安装的node包
npm view [包名] engines # 查看包所依赖的Node的版本
npm outdated # 检查包是否已经过时，命令会列出所有已过时的包
npm update [包名] # 更新node包
npm uninstall [包名] # 卸载node包
npm [命令] -h # 查看指定命令的帮助文档
npm cache clean --force # 清空缓存处理
npm run lint # 自动格式化代码
3.cnpm
① cnpm 介绍
-
支持所有 npm 命令
-
因为npm安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常
-
如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事
-
来自官网：这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步
-
总结：cnpm 是中国 npm 镜像的客户端
② cnpm 安装
npm install cnpm -g --registry=https://registry.npm.taobao.org
③ npm 版本查看
cnpm -v
④ npm 常用选项
| 选项 | 释义 |
|---|---|
| -g | global 全局安装 |
| -registry= | 指定镜像仓库安装 |
④ cnpm常用命令
cnpm install -g [包名] # 安装模块 -g表示全局安装，如果没有-g，则表示在当前项目安装
cnpm list # 查看当前目录下已安装的node包
cnpm view [包名] engines # 查看包所依赖的Node的版本
cnpm outdated # 检查包是否已经过时，命令会列出所有已过时的包
cnpm update [包名] # 更新node包
cnpm uninstall [包名] # 卸载node包
cnpm [命令] -h # 查看指定命令的帮助文档
cnpm cache clean --force # 清空缓存处理
二：Vue-CLI 脚手架
1.介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供了：
① 通过 @vue/cli 实现的交互式的项目脚手架
② 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发
③ 一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级
- 基于 webpack 构建，并带有合理的默认配置
- 可以通过项目内的配置文件进行配置
- 可以通过插件进行扩展
④ 一个丰富的官方插件集合，集成了前端生态中最好的工具
⑤ 一套完全图形化的创建和管理 Vue.js 项目的用户界面
2.安装 Vue-CLI
① 安装 @vue/cli
# 旧版（现已无法安装）
# cnpm install vue-cli -g
# 新版
cnpm install -g @vue/cli
② 测试是否安装成功，查看版本
vue --version
3.创建Vue项目 - 命令行（推荐）
1.切换到要创建项目的路径
cd [路径]
2.创建项目
vue create [项目名称]
3.选择预设Manually select features，手动设置
4.选择项目中需要的特性（方向键↑↓+空格进行选择，回车确认，下同）
下方加粗的是需要选择的！！！
- Choose Vue version：选择Vue的版本，稍后会进行选择
- Babel：兼容性相关（把ES6的语法 自动装换成 ES5 ，以此来兼容浏览器）
- TypeScript：JavaScript 的一个超集，支持 ECMAScript 6 标准
- Progressive Web App (PWA) Support：
- Router：Vue的路由
- Vuex：专为 Vue.js 应用程序开发的状态管理模式
- CSS Pre-processors：CSS的预处理器
- Linter / Formatter：语法检查 与 代码格式化（类似于Python的PEP8规范）
- Unit Testing：单元测试
- E2E Testing：端对端测试(End-to-End Testing)
5.选择Vue的版本，选择2.x
6.路由使用历史模式，这里输入y
7.选择ESLint + Standard config，选标准设置即可
8.选择Lint on save
9.选择In package.json
- In dedicated config files：每个配置文件都单独放置
- In package.json：所有配置都放进 package.json
10.这里输入y
- Save this as a preset for future projects：将其保存为将来项目的预设
11.为预设起一个名字自定义即可
12.项目创建中（哦吼，还有好看的彩色的图标！）
13.项目创建完成，根据提示运行命令即可启动项目
14.切换到项目中，然后启动
cd [项目名]
npm run serve
15.启动成功，访问Local中的地址：http://localhost:8080/
16.浏览器中访问
如需终止，直接在命令行按
Ctrl C即可
4.创建Vue项目 - 图形化界面
1.切换到要创建项目的路径
cd [路径]
2.创建项目
vue ui
3.点击：创建 - 选择路径 - 点击：在此创建新项目
4.项目文件夹：自定义项目名称 - 包管理器：npm - 点击：下一步
5.选择：手动 - 点击：下一步
如果想要使用之前的预设，也可以直接选择
6.勾选上需要的选项 - 点击：下一步
- Choose Vue version
- Babel
- Router
- Vuex
- Linter / Formatter
7.版本选择2.x- Use history... 勾选 - 选择ESLint + Standard config - Lint on save勾选 - 创建项目
8.起个预设名 - 保存与否 可以自定义
9.安装成功
10.点击：任务 - serve - 运行
11.点击：输出 - 点击这个URL进行访问
12.成功访问
新建项目的本质：Vue-CLI从github上拉取了1个空项目（模板），以后在模板上继续写就可以了
5.创建项目 - 老版的安装（不推荐）
vue init webpack [项目名称]
创建项目的选项：
- ? Project name （项目名称，默认
回车即可，名称就是：vue init webpack 之后的名称） - ? Project description A Vue.js project（项目描述，默认
回车即可） - ? Author （项目作者，默认
回车即可，亦可自定义） - ? Vue build standalone
- ? Install vue-router? No（是否安装 vue-router，按
n不安装，后期手动添加） - ? Use ESLint to lint your code? No（是否使用 ESLint做代码检查，按
n不安装，后期手动添加） - ? Set up unit tests Yes（单元测试相关，按
y安装） - ? Setup e2e tests with Nightwatch? No（单元测试相关，按
n不安装，后期手动添加） - ? Should we run
npm installfor you after the project has been created? (recommended) （选择no，项目创建完成直接初始化，手动执行 运行结果）
③ 切换到项目中
cd [项目名称]
④ 安装 项目中 package.json 中需要的包
npm install
# 安装完成后，项目中会多1个 node_modules
# 如果报错了，就按照提示来进行修复
npm audit fix
npm audit fix --force
⑤ 启动项目
npm run dev
⑥ 访问（默认端口是8080）
6.PyCharm中启动Vue项目
① 用PyCharm打开Vue项目
② 点击左上角Add Configuration
③ 点击左上角+ - 点击：npm
④ Scripts下拉框选择serve - 点击：OK
⑤ 此时，点击左上角的 运行按钮，即可启动 Vue项目
⑥ 点击 Local的URL
⑦ 成功访问！
三：项目
1.项目 目录介绍
node_modules: 项目依赖，各种模块（上传项目的时候不需要它，直接删掉，可以使用npm install重新安装）
public: 共用资源
- favicon.ico：网页的标签栏图标
- index.html：项目入口页面，单页面开发（一般不会动它）
src: 项目目标,书写代码的地方
- assets：静态资源
- components：组件
- views：视图组件
- App.vue：根组件（相当于原来的 new Vue({...})）
- main.js：入口js
- router.js：路由文件
- store.js：状态库文件
vue.config.js：项目配置文件(没有可以自己新建)
package.json：项目所有的配置依赖（等同于python项目的reqirement.txt）
重点
- components
- view
- App.vue
- main.js
<template> 这里放HTML代码 </template>
<style> 这里放CSS代码 </style>
<script> 这里放JS代码 </script>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
<About></About>
</template>
<script>
// 导入1个组件
import About from './views/About.vue'
import Vue from 'vue'
// 注册1个全局组件
Vue.component('About', About)
export default {
name: 'Darker',
data () {
return {
msg: 'Welcome to My World'
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
</style>
