vue-cli3添加样式的三种方法：

1.在vue文件中的style里面添加

2.在public中新建一个css文件，在vue文件中的style引入css文件：@import "../../public/xxx.css"

3.在项目的首页html中添加link引用css文件

vue-cli3导入其他项目并运行：

如果导入的项目是vue-cli2的话，先下载依赖npm install

再运行npm run dev

vue-cli3创建项目：vuecli2：install     vuecli3：create

安装vuecli3：vue create vue-test3

启动vuecli3项目：npm run serve

安装vue-cli3

先进入到之前创建的项目中testcli中，可以先检查一下自己的vue版本是否存在（vue -V）

不存在就可以安装了，语法相似：npm install @vue/cli

npm install -g @vue/cli ：主要是安装到全局中

vue-cli3的特点就是增加了可视化，但是建议能使用npm指令就使用npm因为使用的频率决定了你对npm的熟练度以及理解，可视化界面用于测试和找bug比较好

就讲了卸载vue-cli：

主要就是一个命令：npm uninstall vue-cli -g

简写为：npm uni vue-cli -g

运行结束后可以用：vue -V检查一下，如果还有版本号可以再cnpm卸载一下，没有了就代表卸载成功

本节内容主要是用cnpm 重新进行一次上节的操作

值得注意的是

-g：我们一般不用-g，-g用于安装到全局配置中，意思就是npm的主体中的node_modules的文件中，会通用到后面所有用npm配置的项目中；不建议这样操作，应该遵循一个项目一个配置，所以我们用-D用的比较多；

cnpm 与 npm 安装主要的区别就是node_modules文件出现的顺序不一样

cnpm：在cnpm环境搭建的时候 install 就会出现

npm：需要init初始化之后才会出现

总体不影响因为package和node_modules都是必须的所以最终都会有的

※还是跟上节一样最终还是建议用模板工具来创建，节约时间更严谨等等，但是手动安装必须要会要知道流程

不使用vue-cli的模板（webpage）安装组件

• 安装依赖：npm install 或者cnpm install 

• 初始化：npm init -f 或者cnpm install -f

• 安装组件，并查看安装后的内容

流程如下

先在切换到D盘创建kkk文件夹

d:\>md kk

访问其中然后安装npm环境npm install

初始化kkk需要用到npm init -f（-f 的意思是自动创建配置环境，不需要人工干预，跳过项目的配置信息）

※package.json vue-cli中最重要的配置文件，所有的配置和依赖都在里面，安装的插件和版本号都会显示

接下来是手动安装 vue-router（路由跳转的工具，必装）

npm i vue-router -D（意思是开发环境和运行环境都需要安装）

查看文件的cmd语法

type pa*(*代表模糊查询，打开所有含有字母pa的文件)

type package.json（打开访问package.json文件）

接下来安装eslint（语法规范工具）

npm install eslint -D

综上所述：如果不适用模板安装就会很麻烦，容易遗漏需要安装的插件，所以建议开发过程中用合适的模板创建项目，卸载可以一个一个卸载

用模板的语法为：

vue init webpack projectName

vue-cli3安装、升级：

1.卸载vue-cli2：npm uninstall vue-cli -g

2.普通安装vuecli3：npm install -g @vue/cli

2.淘宝镜像安装vuecli3：cnpm install -g @vue/cli

vuecli3启动：vue ui

手动搭建vue-cli环境：

1. 安装依赖：npm install 或者 cnpm install (npm是node.js，cnpm：淘宝镜像)

2. 初始化：npm init -f 或者 cnpm init -f 

3. 安装组件

怎么导入vue-cli项目：[打开其他项目工程]

1.命令行打开项目：npm install 项目添加依赖，部署和运行npm环境

2.启动项目：npm run dev

单独安装eslint:

安装到生产环境：npm install eslint --save

安装到开发环境：npm install eslint --save-dev

生产环境：package.json中的dependencies

开发环境：package.json中的devDependencies

卸载：npm uninstall eslint --save / npm uninstall eslint --dev

为什么不用#号？

路由有两种模式：hash和history，通常采用history模式，mode:history。

history模式时页面404时会报错，hash模式时页面404时不报错

在项目案例效果二的基础上，实现嵌套路由的效果：children:[{},{}]

挂载：<router-view></router-view>

实现效果：

在首页，可以通过链接进入a，b两个“页面”，也可以从a，b两个“页面”返回到首页

template标签下必须有一个根div标签，其他内容都要放在这个div里面

实现页面跳转：

先在src -> components里面创建A、B两个vue页面分别添加页面内容

在index.js中引用A、B两个vue组件

在需要跳转的vue页面中添加<router-link to=""></router-link>跳转，to对应index.js中component的path值

sublime 配置语法高亮

https://github.com/vuejs/vue-syntax-highlight   下载压缩包

sublime打开Preferences -> 设置第一个菜单 ->浏览资源包 ->新建vue文件夹 ->将压缩包的内容都复制进去

然后回到sublime   ctrl+shift+p    搜索vue，选择第一个vue component双击