到此，建议将Add to PATH选项去除，我们后续手动添加，原因是：安装时候默认勾选了该选项，导致实际添加进系统的环境变量仍然为C盘（猜测这可能是由于我们确实更改了默认安装路径从C盘改为了D盘，但是安装包这个程序本身的默认路径没有更改的原因），导致后续在使用npm相关命令的时候，仍会将相关安装包安装在C盘

之后依次next

配置npm环境

为什么需要配置环境变量

环境变量可以理解为软件的一个快捷方式，方便我们通过命令行的形式来操纵npm完成先关操作，当然如果我们不配置环境变量也完全可以，只不过使用起来不方便

*“计算机”，“高级系统设置”，“环境变量”，在这个界面下，在下方的“系统变量”中，找到“PATH”属性，点击编辑，点击新建，将nodejs的安装路径，笔者为：D:\nodejs*

在命令提示符内

npm

npm -v

出现版本号则证明安装及配置成功

更改npm资源包的安装路径

意义

由于npm全局模块的存放路径及cache的路径默认是放在C盘下，这样肯定会增加C盘的负担，使用npm install vue 等相关命令是，总是会将要安装的包安装到C盘，而我们希望的是将这些包统一安装到我们刚才创建的nodejs文件夹下面，方便管理

需要更改安装路径，在安装完npm后，在：C:\Users\PC 路径下，会出现一个名为.npmrc的文件，我将里面的路径改为创建的nodejs文件夹

prefix=D:\nodejs
cache=D:\nodejs\npm_cache

只需要在刚刚的nojs文件夹中创建一个名为npm_cache的文件夹与上述内容的位置对应即可

prefix是要安装的包的相关路径，cache是在后续安装过程中产生的缓存，可能会占用很多空间

补充：如果没有找到这个文件，就在这个路径下面新建.npmrc这个文件，直接输入路径

安装vue

管理员身份打开CMD，输入：

npm install -g @vue/cli

安装成功后，我们继续输入安装配套的webpack打包工具

npm install -g webpack

之后我们在命令行输入

vue -V

同样这里应该显示版本号

构建vue项目

在cmd里使用vue ui会自动跳转浏览器中的vue图形化管理界面（http://localhost:8000）

自定义要创建项目的位置

选择一套符合需求的预设配置套装

耐心等待几分钟，等待项目初始化配置完成。在命令行窗口中我们可以看到安装的过程，安装结束后，界面会跳转到欢迎界面。可以看到左上角名为：test的项目已经创建好了

本地运行

将新建的项目文件夹（内有自动生成好的若干文件）拖拽到hbuilder或vscode

在编辑器的终端运行

npm run server

或

npm run dev

运行在我们本地服务器的8080端口：http://localhost:8080/

浏览器标签页的成功效果如下：

具体工程的代码解析

以coalpress应用的前台设计为例，同时注意图中的项目结构如图示

其中结构解释为下：

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css: 样式文件。
static	静态资源目录，如图片、字体等。
public	公共资源目录。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式
dist	使用 npm run build 命令打包后会生成该目录

import TStope from "./stope_unit.js";
// 通过import导入一个名为TStope的类，该类来自于stope_unit.js文件
fetch('http://127.0.0.1:8000/stope_class/stope')
// 使用fetch函数从指定的URL
// URL是后端API提供的，用于获取名为stope的资源
.then(response => {
    if (response.ok){
        throw new Error('Network response was not ok');
    }
    return response.json();
    // 对fetch返回的响应进行处理。在.then块中，首先检查响应的状态是否为成功，如果不是成功状态，抛出一个错误
    // 如果响应状态是成功的，使用response.json()方法解析为JSON格式的数据
})
.then (data =>{
    // 创建TStope类的实例并赋值，处理成功解析的JSON数据。在这个块内部，首先创建了一个名为stopeInstance的TStope类的实例
    const stopeInstance = new TStope();
    try {
        stopeInstance.fun_base_strinput(data);
        //输出数据
        const outputData = stopeInstance.fun_base_output();
        console.log(outputData);
    }catch (error) {
        console.error('解析和赋值出错:', error);
    }
    // try块内部，调用stopeInstance.fun_base_strinput(data)方法，将刚刚解析的JSON数据传递给该方法进行处理（将JSON数据赋值给TStope类实例的一些属性）最后调用stopeInstance.fun_base_output()方法来获取经过处理的数据，将其赋值给outputData
})
.catch(error =>{
    console.error('发生错误:',error);
})
// 最后，使用console.log(outputData)将经过处理的数据输出到浏览器的控制台，如果在上述任何步骤中出现错误，将在catch块中捕获错误，并使用console.error输出相应的错误信息

上手vue

基础

概念

用于构建用户界面（1基于数据转换成顾客能看懂的页面）的渐进式（2学多少用多少、学的更多满足更多需求）框架（3一套高效率的方案）

实例

初始化渲染的第一就是创建实例，需要四步

准备容器
引包
new vue
指定配置项
1. el指定挂载点
2. data提供数据

{{msg}} 内部将来编写用于渲染的代码逻辑
开发或生产版本（从官网v2.cn.vuejs.org）有所不同，开发版会完整
el确定管理范围（不是box或box2，而是指定“app”），data提供渲染数据

插值表达式

作用

利用表达式来插值，渲染到页面中

表达式是可以被求值的代码，js引擎会计算出一个结果

语法

1 使用的数据必须存在
2 不支持语句（if、for）
3 不能在标签属性中使用双花括号

响应式

开发者工具

指令

v-show

v-if

v-else

v-on

v-bind

v-for

v-model

综合

列表渲染

删除功能

添加功能

底部统计

清空

尝试vue

root的寻路

hello world

在vsc中创建一个index.html，键入！再按下tab补全一段h5模板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello world</title>
    <script src="http://unpkg.com/vue@next"></script>
    // 自动提供的一个cdn地址,引入vue的库以编写代码
</head>

<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>hello world</div> '
    }).mount('#root')
    // “我要创建一个vue实例，要在名叫root的div里使用vue了”
    // template是指“找到root这个节点，把helloworld放到div里”
</script>
</html>

其浏览器渲染效果如图

对root的寻路原理理解之后我们尝试以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello world</title>
    <script src="http://unpkg.com/vue@next"></script>
    // 自动提供的一个cdn地址,引入vue的库以编写代码
</head>

<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                cotent:1
            }
        },
        template: '<div>{{content}}</div> '  
        // 双层花括号是js的表达式之一，说明content是一个‘变量’
    }).mount('#root')
</script>
</html>
// “我找到root节点，往里面挂上一个元素'content'，其内容是显示‘1’这个数字”

简易计数器counter

<script>
    Vue.createApp({
        data() {
            return {
                cotent: 1
            }
        },
        mounted() {
            setInterval(() => {
                this.cotent += 1;
            }, 1000) // 页面加载完成后mounted函数会自动执行set定时器
        },
        template: '<div>{{content}}</div> '
    }).mount('#root')
</script>