vue-cli基础知识点一

一、前端、后端；前台、后台概念。

• 前台：以html、css、js为基本元素编写的页面功能。
• 后台：就是通过flask、Django等提供的web服务。
• 前端、后端：其都属于前台的部分，其前端主要指的是页面的美化，布局等。后端主要指的是给页面提供跳转，变量共享等功能的服务。
  vue-cli脚手架就是前端框架，学习vue不一定要会node,而是会node的一些指令就可以了,其主要使用的是node里的npm指令。
  node.js就是后端，给页面提供服务的，使页面能有效的、高效的跳转。

二、需要了解的doc命令

Disk Operating System)是一个使用得十分广泛的磁盘操作系统。主要是微软公司开发的。
其中git CMD有跟windows系统自动的CMD一样的终端，其中git CMD可以通过滚动鼠标进行字体放大缩小。

• cd 打开文件夹，例如cd myfiles/ 当进入另一盘的时候，先进行d:进入对应的盘符。
• md 创建新文件夹， 例如 md myfiles
• dir 查看文件夹内容，跟linux的ls差不多
• cd … 返回上一级文件夹
• cls 清空当前屏幕
• type：输出对应文件的内容，类似linux的cat 。

三、npm与cnpm的区别、vue-cli2的安装、卸载

npm（node package manager）是nodejs的包管理器，用于node插件管理：包括安装、卸载、管理依赖。
cnpm：因为npm安装插件是从国外服务器下载，而cnpm是淘宝团队分享的镜像网址下载。常用。其安装指令为：

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm -root -g :查看全局安装的文件夹位置。

vue-cli2的安装：

• 第一种直接使用cnpm

cnpm install -g vue-cli 

此时安装如果失败，无法解决，可以尝试用下面的直接从国外服务器下载安装。

• 使用npm

npm install -g vue-cli

安装时间大概一两分钟。
卸载指令为：
因为是全局安装，卸载的时候也要用全局卸载，使用-g。接卸载安装到nodejs里的包。

npm uni -g vue-cli

如果安装的是用npm则卸载的也要用npm，如果是cnpm则卸载的时候也要用cnpm。

• 使用npm，但是知道远程镜像仓库。
  自己就是用这个指令安装成功的，使用cnpm会出错，直接使用国外安装的vue也不行
  在进行vue init webpack时会报错。

npm install -gd vue-cli --registry==http://registry.npm.taobao.org

• 设置npm的仓库地址为指定的地址,以后可以直接正常使用npm，而不用指定地址。

npm config set registry http://registry.npm.taobao.org

安装完vue-cli可以同下面指令查看vue版本-大写的V：

vue -V

其中-g是把包安装到了nodejs的全局安装目录下：C:\Users\yang\AppData\Roaming\npm\node_modules
而没有加-g的则是安装到当前工程目录下的【node_modules】目录下。

四、-S -D 参数：

-S --save安装包信息加入到dependencies-生产阶段的依赖 npm i -g --save vue-cli
-D，其代表的–save–dev两者的结合。 安装包信息加入到devDependencies–开发阶段的依赖，
i是install的缩写 ，前面没有“-” 例如 npm i -g vue-cli

五、创建cli工程配置

在创建vue-cli项目的时候，可以使用模板，其中使用频率最高的就是webpack。这里以其为模板创建工程

• 项目初始化，使用指令为：
  cd到自己的工程目录下

vue init webpack projectName

其中创建工程需要用户参与的配置，主要下面两项，其它可以用默认，直接回车即可。
Install vue-router?（Y/n）是否安装vue-router，这是官方的路由，大多数情况都会使用，输入‘y’回车即可。
Use ESLint to lint your code ? y/n是否使用ESLint管理代码，是用通用代码风格来管理代码。如果初始化的时候没有ESlint选y，以后也可以通过指令进行添加上这个。

• 初始化成功后，其输如下指令：

cd projectName
npm run dev 

其中npm run dev 就是启动服务，可以说是后端。
到时候就好出现localhost:8080的网址，到时候用浏览器登录就可以看到vue的信息展示页面。代表全部成功了。

六、vue的界面编写

其中1处是不区分大小写的，其中后面指的是引入时间文件，及后面的那个也可以改成-Fist。
然后ctrl+s后，3处的页面会自动捕获改动，进行页面显示修改。

七、vue语法高亮显示、智能提示

其主要针对sublime的语法高亮显示，其的是第三方插件，地址如下：
https://github.com/vuejs/vue-syntax-highlight

• 其高亮的配置方法：
  下载解压后，在sublime里配置包路径，点击如下：
  
• 在打开的文件对话框目录下新建一个【vue】文件夹，然后把刚才下载解压后文件夹里的内容复制到这个新建的【vue】目录下：
• 接着Tools->Command Palette 或者Ctrl+shift+P进行打开包搜索框，进行输入vue，最后选择【Set Syntax Vue Compoment】完成配置。

八、页面编写常用标签、 还有子路由挂载、url里的#符合

• <router-link to="/first"></router-link>就是定义这里面的文字，进行跳转的路由地址,而路由地址是在router文件夹下进行定义的，每个路由地址都绑定了一个component。
• children子路由，其会把父页的信息也一起显示在一起，主要用在哪些子页面跟父页面都有共同内容的，如下：
  
  其中子路由挂载：
  即在routes里添加children后，则在页面文件vue后缀的文件父页面后面要添加路由挂载标签，否则子路由不会产生作用，如下：

<router-view></router-view/>

• url里的#的作用，能不能去掉？
  其中url的访问模式：
  hash模式：地址栏包含有#符号，符号以后的不被后台获取。即如果地址栏地址没有发生改变的情况下，浏览器是不会请求后台服务的，可以减少请求数量。其看是否改变是以#号为标准的，不管符合右边的地址怎么变换都不会重新加载，只要左边的地址一样即可。例如：

http://localhost:8080/#/a1

不足：但是url的#是特殊符合，一般不用在url里的，正常使用的url是history模式的，其也可以减少对后台的访问次数。
history模式：具有对url历史记录进行修改的功能。其也可以起到减少对后台的请求次数。
不足：即页面刷新的时候，如果页面不存在的话，则会报404的错误。而hash不会。
注意：在微信支付、分享url作为参数传递时，#不能满足需求。history需要后台配合，处理404的问题。
把router添加参数，修改url模式为history：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from "@/components/fist"

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    }
  ]
})

此时在浏览器上输入的url可以不带符号则访问成功：http://localhost:8080/

九、单独安装eslint，其他包方法类似

看开发环境、生产环境带的包安装包，有哪些，其文件位置为：工程目录下的package.json。
其中字段为dependencies对应的是生产环境的包，
其中字段为devDependencies对应的是开发环境的包。
以后熟悉开发后就会知道哪些包是开发环境下安装包，哪些是生产环境下安装包，因为有些包只在开发或者生产的时候用上，例如eslint的代码规范包，其一般安装在开发环境即可。如果已经开发完后就没必要进行修改代码规范检查了

安装只在开发环境为：

npm i eslint --save--dev

如果–save不加，会只安装到生产环境里，开发环境里安装不到。如果只有–save也只安装到生产环境。

卸载生产环境的router为：

npm uni vue-router --save

十、怎么导入vue-cli项目：

vue-cli版本是向下兼容的，即3版本的可以导入2的工程。

如果拷贝一个工程到指定目录后，可以先尝试使用下面的指令看能不能运行起来。

npm run dev

如果运行不起来，则说明npm环境确实了package.json里面的一些包，此时可以在通常目录下运行如下指令，进行相应的包安装：

npm install

十一、如果不用模板，而是手动搭建vuecli运行环境：

实际场景搭建环境都通过模板来搭建比较好，因为可以减少手动工作量，而且很多环境包不容易遗漏。

使用模板的方式可以参考：五、创建cli工程配置
不使用模板的方式为：

• 新建一个文件目录
• 安装依赖：npm install
• 初始化-f代表所有的选项都是默认的：npm init -f
• 安装组件，D代表–save–dev 例如：npm i -g vue-router -D
  至此整个开发环境都搭建好了。

其中-g是把包安装到了nodejs的全局安装目录下：C:\Users\yang\AppData\Roaming\npm\node_modules
而没有加-g的则是安装到当前工程目录下的【node_modules】目录下。

十二、安装vue-cli3、创建项目：

• 安装
  可以添加下载地址镜像。其实进行图像界面配置工程跟安装包等，但是主流的话还是用指令是最好的，因为UI的各个运作比较慢。

npm install -g @vue/cli

其会安装最新版的，如果想安装3版本的，使用下面指令：

npm install -g @vue/cli@3.x

下面是通过命令行进行创建的，UI的就不在这个教程。

• 创建项目：
  create 后面跟的是项目名称,其中Router一定要选择上。

vue create vue-test3 

其会进行一些人工选择的选项，如下：

• 启动项目：

npm run serve

• 导入项目
  如果使用cli3的环境，运行2的工程，则启动的工程的时候，还是要用
  2的指令，用3的指令启动会报错。即如下：

npm run dev

十三、添加样式的三种方法：

其中最好的样式添加方法，应道是在public里的index.xml文件里引入样式文件。
第二好的方法就是专属样式可以直接在对应的vue文件通过

• 在对应的vue文件添加style：

<template>
	<div>
		<router-link to='/' id='hao'>转向A页面</router-link>
	</div>

</template>
<style type="text/css">
	#hao{
		color: red;
	}
</style>>

• 把style放到css文件，起名为-first.css,放置目录是public。在vue文件里添加引用。
  里面放置的代码为：

#hao{
	color: blue;
	}

接着在vue文件的style添加引入：

<template>
	<div>
		<router-link to='/' id='hao'>转向A页面</router-link>
	</div>

</template>
<style type="text/css">
	@import "../../public/First.css"
</style>

• 把style放到css文件，起名为-first.css,放置目录是public。在index.html文件添加应用，其添加是属于全局 的。
  其中在html文件添加的引入代码为：

    <link rel="stylesheet" type="text/css" href="First.css">