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。

添加镜像

1. 安装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

2. 很快安装好后，输入：npm list -g来查看所有安装过的包。

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

   回车后，可以看到两行内容：

   C:\Users\{你的用户名}\AppData\Roaming\npm
   `-- cnpm@7.0.0
   

   第一行表示cnpm包在本机中的安装路径

   第二行表示包名和版本号

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

Vue环境配置

安装vue-cli

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

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

cli是command line命令行的缩写。

参考vue3官方文档。

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

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

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

2. 查看vue/cli版本。

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

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

3. 查看帮助。

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

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

创建空白Vue2项目

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

   比如，本例子中为：C:\AAProjects。

2. 在cmd中输入命令进入该目录。

   • 输入：c:，先切换到c盘。
   • 输入cd C:\AAProjects，进入该文件夹。

   cd表示change directory。

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

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

   成功进入C:\AAProjects后，cmd界面光标的左边会变成：

   C:\AAProjects>
   

3. 在该文件夹内创建项目。

   在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 serveC:\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>两块：

<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的定义。

---

路由：

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

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

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

Vue.use(VueRouter)

3. 定义路由信息数组

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

  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')}
]

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

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，因为在此系统上禁止运行脚本。

解决：

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

在VScode中加载Vue项目

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

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

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

   根目录是VUE-LEARN，然后是里面的文件夹和文件。

2. 打开终端：【Terminal】-【New Terminal】。

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

   终端默认用的是Windows PowerShell。

   终端界面内容如下：

   PS C:\AAProjects\vue-learn>  
   

3. 运行vue项目。

   运行命令：npm run serve。

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

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

4. 停止运行。

   让鼠标在终端界面处于激活状态，然后按ctrl+c则会提示：

   终止批处理操作吗(Y/N)?
   

   输入y并回车， 则停止项目的运行。

5. 重新运行项目。

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

在VScode安装插件

1. 安装Vetur插件。

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

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

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

2. 其他插件