前置

node

WIN7 64位，最高支持到 13.14版本，由于win7不在维护，所以node之后的版本也不支持win7，想用高版本，只能升级系统。
另外win的node版本只能覆盖安装。有另外一种方式，可以进行node的版本切换，nvm说是支持windows了，有兴趣的话，可以学习一下。
安装后，环境变量会自动配置指向安装路径。
修改npm存放路径，默认在c盘
npm config ls 查看配置
npm config set prefix”E:\nodejs\node_global” 全局安装存放的路径
npm config set cache”E:\nodejs\node_cache” 缓存
改完之后，环境变量也要修改，默认是指向c盘下C:\Users\xxxxx\AppData\Roaming\npm 需指向E:\nodejs\node_global，不然新安装的全局组件，会不到。
环境变量配置如下：
Path变量值中，删除原有E:\nodejs;的配置。当然，不删也行。系统搜索只会搜索配置的文件下的文件，不会深入搜索文件夹下的文件夹中的文件。
系统变量，新创建一个变量名为NODE_HOME，值为E:\nodejs的变量。
在Path变量值中追加%NODE_HOME%;%NODE_HOME%\node_global;即可。

什么是Vue.js

Vue（发音为/vjuː/，类似于view）是用于构建用户界面的渐进框架。是用于构建用户界面的渐进框架。与其他整体框架不同，Vue从头开始设计以逐渐采用。核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全有能力为复杂的单页应用程序提供支持

使用

联系的话，可以

模板语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <p>{{ message }}</p>
  <p v-html="message"/>
</div>
<script>
const RenderHtmlApp = {
  data() {
    return {
      message: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#app')
</script>
1
2
{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。
如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。
1
<span v-once>这个将不会改变: {{ message }}</span>

HTML 属性中的值应使用 v-bind 指令。
指令是带有 v- 前缀的特殊属性。比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true  /* 改为false，信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

vue-router 路由
sass css拓展 sass-loader：^10.1.1 11有问题
postcss js转css
axios 基于 promise 的 HTTP 库
javascript 加密库
screenfull 满屏库
nprogress 进度条
clipboard 复制粘贴