vue-cli基础知识点一

野性酷女 2022-12-24 11:56 253阅读 0赞

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

*  前台：以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的界面编写 ###

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

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

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

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

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

*  `<router-link to="/first"></router-link>`就是定义这里面的文字，进行跳转的路由地址,而路由地址是在`router`文件夹下进行定义的，每个路由地址都绑定了一个`component`。
 *  children子路由，其会把父页的信息也一起显示在一起，主要用在哪些子页面跟父页面都有共同内容的，如下：  
    ![在这里插入图片描述][20201128145058624.png_pic_center]  
    `其中子路由挂载`：  
    即在`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  
    至此整个开发环境都搭建好了。

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

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

npm install -g @vue/cli

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

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

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

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

vue create vue-test3

其会进行一些人工选择的选项，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdkYXNoaTg4OA_size_16_color_FFFFFF_t_70_pic_center 2]

*  启动项目：

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文件添加的引入代码为：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdkYXNoaTg4OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/a9e9142f21d2426e9d6bea81b67b42ae.png
[https_github.com_vuejs_vue-syntax-highlight]: https://github.com/vuejs/vue-syntax-highlight
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdkYXNoaTg4OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/c894cd1454c14af8819b9306c200c42c.png
[20201128145058624.png_pic_center]: /images/20221120/992b2f5744d64255bf3de4491402ac0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdkYXNoaTg4OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/2fb460f4971f46f2961b7a789e71c271.png