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 常用选项

⑤ 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 常用选项

④ 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.浏览器中访问

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.成功访问

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 install for 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）

http://127.0.0.1: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>
    <About></About>
  </div>
</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>