Vue前端开发学习的简单记录

文章目录

NodeJS环境配置
Vue环境配置

NodeJS环境配置

下载nodejs安装包

从地址Node.js 中文网，选择Windows 安装包 (.msi) 64位下载，例如下载版本v16.8.0。

nodeJS是JS运行的环境（浏览器环境的封装）

下载的nodeJS中包含npm。

npm的含义为node package manager，是JS的包管理器

nodejs和npm两者之间的关系：https://blog.csdn.net/weiyastory/article/details/54379805

以往版本下载地址

安装nodejs

双击node-v16.8.0-x64.msi，进行安装。默认点击Next，特别要修改的地方如下：

安装路径：C:\Program Files\nodejs\，可修改，但笔者使用默认值。

共安装了4项：

Node.js核心的运行时。
npm（node package manager，Node.js的包管理器）。
开始菜单中链接到在线文档和官网的快捷方式。
将Node.js、npm以及由npm全局安装的模块，添加到系统的环境变量中。

查看版本

win+r打开cmd，

node -v并回车，看到版本v16.8.0。
npm -v并回车，看到版本7.21.0。

添加镜像

安装cnpm。在cmd界面中，输入下面内容并回车：
复制代码
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
cnpm中的c是中国版的意思，然后以后就可以只使用cnpm代替npm了。

相关介绍：https://www.cnblogs.com/chase-star/p/10455703.html

淘宝npm镜像：https://developer.aliyun.com/mirror/NPM?from=tnpm
很快安装好后，输入：npm list -g来查看所有安装过的包。

如果权限不足无法查看，请自行百度。

回车后，可以看到两行内容：
复制代码
```
C:\Users\{你的用户名}\AppData\Roaming\npm
`-- cnpm@7.0.0
```
第一行表示cnpm包在本机中的安装路径

第二行表示包名和版本号

显示这两行后说明安装成功了。

Vue环境配置

安装vue-cli

vue-cli是vue的管理工具，也称vue的脚手架。

注意如果安装失败，应检查旧版本的是否已经删除，删除方法请自行百度。

cli是command line命令行的缩写。

参考vue3官方文档。

全局安装最新版的vue-cli，cmd中输入命令：cnpm install -g @vue/cli

-g表示全局-global的简写。

同样，安装完后可以输入npm list -g查看安装情况，以及去安装路径C:\Users\{你的用户名}\AppData\Roaming\npm下看一看多出了哪些文件。
查看vue/cli版本。

cmd中输入：vue -V(大写V)，可以看到@vue/cli@4.5.13

当然也可以输入npm list -g，查看所有安装的包的版本情况。
查看帮助。

cmd中输入：vue -h(help)，可以查看支持的命令（Commands）。

比如有一条创建项目的命令：create [options] <app-name> ，下面就用它创建一个空白的vue项目。

创建空白Vue2项目

打开或创建一个放置项目的文件夹。

比如，本例子中为：C:\AAProjects。
在cmd中输入命令进入该目录。
- 输入：c:，先切换到c盘。
- 输入cd C:\AAProjects，进入该文件夹。
cd表示change directory。

如果是E盘的文件夹，则需要先切换盘符：e:，

再进入文件夹：cd E:\AAprojects。

成功进入C:\AAProjects后，cmd界面光标的左边会变成：
复制代码
```
C:\AAProjects>
```

在该文件夹内创建项目。

在cmd中输入：vue create vue-learn并回车。

意思是创建一个名为vue-learn的项目。

然后会进入一个Vue CLI的界面：

复制代码

Vue CLI v4.5.13
? Please pick a preset:
> common1 ([Vue 2] less, babel, router, vuex)
  Default ([Vue 2] babel, eslint)
  Default (Vue3) ([Vue 3] babel, eslint)
  Manually select features

在这个界面中我们可以按上下键来选择，选择哪一项，光标>会移动到哪一项的前面。

我们选择默认的common1 ([Vue 2] less, babel, router, vuex)并回车，表示创建具有这四项模块的Vue 2项目。

上面这一步需要等待一分钟左右，要看网络速度情况。

创建完成后，cmd界面中内容是这样的（彩色图标可能没有）：

复制代码

Vue CLI v4.5.13
✨  Creating project in C:\AAProjects\vue-learn.
⚙️  Installing CLI plugins. This might take a while...


added 1236 packages in 1m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 19 packages in 8s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-learn.
👉  Get started with the following commands:

 $ cd vue-learn
 $ npm run serve


C:\AAProjects>

分析空白项目的结构

文件内涵

经过上面的项目创建，我们在C:\AAProjects文件夹中创建了一个名为vue-learn的vue项目，该项目为vue 2项目，并且已经默认添加了四个常用的模块： less, babel, router, vuex。
我们可以打开C:\AAProjects文件夹，看到多出了一个名为vue-learn的文件夹（也是项目名）。

进入vue-learn文件夹内，可以看到里面的文件结构如下：

复制代码

node_modules    //文件夹
public			//文件夹
src				//文件夹。下面的都是文件。
.browserslistrc
.gitignore
babel.config.js
package.json
package-lock.json
README.md

比如src是source的简写，代表源码的含义，也是我们核心代码的存放之处。

下面5个文件是配置文件，最后一个（README即readme）是markdown格式的项目介绍（说明）文件。

node_modules存放项目的依赖模块。

进入src文件夹，可以看到如下的结构（vue项目的主要结构）：

复制代码

assets		//资产目录，可存放静态图片。
components	//组件目录，可存放组件，用以复用。
router		//路由目录，存放路由的index.js文件。
store
views		//视图目录，存放完整界面
App.vue		//上面的都是文件夹，只有下面两个是文件
main.js		//相当于Java中的main方法，是整个项目JS的入口。

项目的核心代码主要就是写在这些文件及文件夹里面的文件中。

进入public目录，里面的facicon.ico图标就是浏览器页面最上面的图标。

模板结构

模板结构：

组件模板：<template>
脚本：<script>
样式：<style>

界面：

主界面：App.vue

App.vue作为第一个界面，是主界面，里面包含<template>和<style>两块：

javascript 复制代码

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<style>
/* 样式代码省略 */
</style>

可见About是一个点击可跳转的界面，Home则是默认初始界面。无论是Home还是About点击之后的界面，都是显示在<router-view/>中。

下面需要找到对/和/about的定义。

路由：

打开router目录中的index.js文件，首先是引入JS包

javascript 复制代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

然后是声明要使用Vue的路由

javascript 复制代码

Vue.use(VueRouter)

定义路由信息数组

path：前面App.vue中使用的跳转路径、路由地址，有/和/about两个。
name：起的名字，暂不详。
component：该路由地址使用的组件。
对于/，使用Home组件 。因为是默认显示的组件，所以不是懒加载，直接写组件的名字。
对于/about，使用About组件。因为需要点击之后才显示，所以进行了懒加载，需要用import等语句。

javascript 复制代码

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home   
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

根据路由信息，创建路由Vue对象

javascript 复制代码

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL, //基路径
  routes   // （缩写）相当于 routes: routes
})
export default router

mode为history，则访问路径可以不带#号。

base为基路径，用于为项目url添加后缀。

https://m.imooc.com/qadetail/319436

运行vue项目

我们创建的vue-learn项目是有Hello World界面的，我们先运行打开这个初始界面。

在cmd中，先进入vue-learn文件夹：

复制代码

C:\AAProjects>cd vue-learn

然后运行：

复制代码

C:\AAProjects\vue-learn>npm run serve

等待片刻，cmd界面上出现以下内容：

复制代码

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.22.137.117:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

从上面文字可以看到项目的URL有两个，

一个是：http://localhost:8080/，

另一个是：http://172.22.137.117:8080/

这两个URL都可以输入到浏览器中打开网页，并且对应同一个网站。

我们将http://localhost:8080/输入到浏览器的地址栏中，并回车，可以看到Vue项目的初始（默认）网站页面。

页面中有Vue的图标，标题为：Welcome to Your Vue.js App，并且还有一些其他文字、超链接。

后面我们将在这个初始页面上进行修改，试验vue的一些语法。

关掉cmd窗口后，该项目便停止运行，在浏览器中将无法打开网站。

需要重新在cmd中的项目文件夹中运行(npm run serve)网站。

安装VScode

下面我们将在VScode中学习Vue语法，编写Vue项目。

VScode下载地址，下载Windows 64位稳定版（Stable）。

使用的默认的安装路径：C:\Users\{用户名}\AppData\Local\Programs\Microsoft VS Code，其余参数也默认（比如会添加Path环境变量）。

VScode可能需要的配置

关于Git的路径

如果Git是默认的路径：C:\Program Files\Git\bin，则不需要在VScode中配置。

问题： 输入git --version，会报"无法将"git"项识别为 cmdlet、函数、脚本文件或可运行程序的名称"的错误。

解决：右击VScode，【兼容性】-【运行兼容性疑难解答】，以管理员身份运行。

此外可以考虑在VScode中配置Git的路径：在Settings中搜索git.path。

关于cnpm报错

报错内容：无法加载文件 ...npm\cnpm.ps1，因为在此系统上禁止运行脚本。

解决：

以管理员身份运行powershell
输入：set-ExecutionPolicy RemoteSigned
输入：A
（非必要）输入：get-ExecutionPolicy（仅用于查看当前权限）

在VScode中加载Vue项目

打开文件夹：【File】-【Open Folder...】（Yes, I trust the authors）。

打开C:\AAProjects\vue-learn文件夹。

在左侧栏目的【Explorer】中可以看到文件夹目录。

根目录是VUE-LEARN，然后是里面的文件夹和文件。
打开终端：【Terminal】-【New Terminal】。

会默认以打开的文件夹为当前目录。

终端默认用的是Windows PowerShell。

终端界面内容如下：
复制代码
```
PS C:\AAProjects\vue-learn>  
```
运行vue项目。

运行命令：npm run serve。

注意：初次安装VScode并使用终端并执行npm run serve命令时，可能会报没有权限的错。

需要根据报错的文字另行百度，开放相关权限，就可以在VScode使用这些命令了。
停止运行。

让鼠标在终端界面处于激活状态，然后按ctrl+c则会提示：
复制代码
```
终止批处理操作吗(Y/N)?
```
输入y并回车，则停止项目的运行。
重新运行项目。

在终端界面，按键盘方向键中的上键可以向上调取出前面用过的命令，找到npm run serve并回车，则重新运行项目。

在VScode安装插件

安装Vetur插件。

在左边栏目最下面一个中搜索并安装vue常用插件：Vetur。

安装之后的明显变化是：文件内不同关键字、标签的文字颜色变了。

安装ctrl+鼠标左击可以方便地跳转。
其他插件