第一章 课程简介
为什么要使用vue-cli(是vue的脚手架工具)
1、平台无关、功能更齐全
2、占内存少、更高效
3、帮助我们写好vue基础代码的工具，也是行业内通用的工具
课程目标
1、vue-cli家族成员及存在的意义
2、使用vue-cli2搭建项目
3、使用vue-cli3搭建项目及调试
4、使用vue-cli3完成项目案例
课程安排：
1、vue-cli家族成员：vue-cli2、vue-cli3
Command-Line Interface：又称命令行界面或字符用户界面
2、vue-cli2搭建项目：
cli2全局安装并创建项目、文件结构、文件模板、边学边练项目案例
3、vue-cli3使用详解：
cli2升级cli3，快速原型开cli3的项目管理、测试、定制开发
4、vue-cli3项目案例
使用cli3创建项目案例，并进行单元测试等
第二章 vue-cli2脚手架
2-1 node.js环境安装
一、概念
01 什么是前台、后台
02 什么是前端、后端
二、node.js安装
node官网：Node.js
需要记住安装的位置：用于配置环境变量 C:\Program Files\nodejs\
查看是否安装成功：node -v
如果安装完成后，提示”node“不是内部或外部命令，也不是可运行的程序，需要配置环境变量。
再重启cmd，输入node -v查看即可。
通过npm -v 查看npm版本号
三、常用的dos命令
● cd 打开文件夹
● md 创建新文件夹
● dir 查看文件夹内容
● cd.. 返回上一级文件夹
2-2 npm安装及参数设置（1）
一、npm与cnpm的区别
● npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。
● cnpm：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队分享了使用国内镜像来代替国外服务器。
二、-g参数
● 全局安装（global），可以在命令行下直接使用
● 可以通过npm toot -g查看全局安装的文件夹位置
三、vue-cli2安装
● npm install -g vue-cli / npm install vue-cli -g
● npm install -g vue-cli / npm install vue-cli -g
四、手动指定从哪个镜像服务器获取资源
● npm install -gd express --registry=http://registry.npm.taobao.org
只要安装脚手架的时候才会用到这条命令，使用频率并不高
● 为了避免每次安装都需要--registry参数，可以使用如下命令进行永久设置
npm config set registry http://registry.npm.taobao.org
2-3 npm安装及参数设置（2）
一、-S，-D参数
● -S，--save 安装包信息将加入到dependencies（生产阶段的依赖）
● -D，--save --dev 安装包信息将加入到devDependencies（开发阶段的依赖），所有开发阶段一般使用它
● i是install的缩写（注意：前面没有”-“）
※ 不带-g，如果本地安装失败，则缺少初始文件package.json，进行如下操作：npm init -f
二、查看全局安装的位置
● npm root -g
2-4 cnpm和vue-cli2安装
一、cnpm安装（下载）
● npm install -g cnpm --registry=http://registry.npm.taobao.org
二、vue-cli2安装
● npm install -g vue-cli
● cnpm install -g vue-cli
2-5 创建vue-cli2项目
● vue init webpack projectName
一、创建cli过程中部分配置内容
● Install vue-router？（Y/N）是否安装vue-router，这是官方的路由，大多数情况下都是用，这里就输入”y“后回车即可。
● Use ESLint to lint your code？（Y/N）是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
二、成功启动vue-cli项目
http://localhost:8080（8080可改变）
等待项目安装即可，需要一定的事件，完成安装后，按提示操作，cd到文件夹再复制地址到浏览器打开~~
2-6 更改vue-cli2的helloworld
一、将vuecli的首页更改为显示自定义的helloworld
01 - router → index.js 中配置路由
02- components 中新建vue文件
2-7 配置语法高亮显示（效果一）
地址：https://github.com/vuejs/vue-syntax-highlight
github无法打开的话，需要配置host~~~
2-8 router实现页面跳转（效果二）
一、在首页，可以通过链接进入a，b两个”页面“
二、在a、b两个页面可以回到首页
2-9 router实现子路由（1）（效果三）
一、在项目案例效果二的基础上，实现嵌套路由的效果：children:[{},{}]
2-10 router实现子路由（2）
通过子路由中也会展示父页面的内容，若不想展示，设置平级路由，不使用children
2-11 为什么不用#号
● 地址栏中，经常出现#，是什么作用，能不能去掉#？
● hash模式：地址栏包含#符号，#以后的内容不被后台获取
● history模式：具有对url历史记录进行修改的功能
● 在微信支付、分享url作为参数传递时，#不能满足需求
● history需要后台配合，处理404的问题
使用history写法
// 在router index.js中 加入mode: 'history'
export default new Router({
mode: 'history',
routes: [
......
]
})2-12 单独安装eslint
● 如果没有安装vue-router，可不可以单独进行安装？
● 基于webpack模板创建项目的语法是：vue init webpack projectname
01 - 将eslint安装到生产环境：npm install eslint --save
安装后在package.json的dependencies中
02 - 将eslint安装到开发环境：npm install eslint --save-dev（一般安装到开发环境）
安装后在package.json的devDependencies中
2-13 导入其他项目添加依赖并运行
● 怎样导入vue-cli项目
01 - npm install（添加依赖）
02 - npm run dev
2-14 居中怎么实现的（主组件的样式设置）
● 项目案例的效果里，是怎么实现居中效果的？
2-15 阶段小结
● 学习了vuecli基本的文档结构，掌握页面跳转的基本方法
● 学习了cli2的组件安装、卸载等
第三章 vue-cli3脚手架
3-1 手动搭建vue-cli环境（1）
一、如果不用vuecli的模板，如何搭建
● 安装依赖：npm install 或者 cnpm install，会生成package-lock.json文件夹
● 初始化：npm init -f 或者 cnpm init -f
● 安装组件，并查看安装后的内容，例如：vue-router和eslint（-D相当于 --save-dev）
增加了node_modules文件夹
查看package.json中内容
3-2 手动搭建vue-cli环境（2）
一、使用cnpm安装
只生成了node_modules，并未生成package.json，进行下一步
3-3 卸载vue-cli2
● 卸载vue-cli2：npm uninstall vue-cli -g
* 如果vue -V发现版本号仍然存在，使用cnpm uinstall vue-cli -g进行卸载
3-4 安装vue-cli3
● 普通安装vuecli3：npm install -g @vue/cli
● 淘宝镜像安装vuecli3：cnpm install -g @vue/cli
安装完成后查看版本号：vue -V
3-5 vue-cli3图形界面先睹为快
● 使用vue ui 启动图形界面
3-6 vue-cli3创建项目（命令行方式创建项目）
● vue create vue-test3
3-7 vue-cli3第一个welcome
改变首页
3-8 vue-cli3导入其他项目并运行
使用vuecli3的环境运行vuecli2的项目
3-9 vue-cli3项目案例效果（1）
3-10 vue-cli3项目案例效果（2）
3-11 vue-cli3添加样式的三种方法
扫一扫
3154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
