从零搭建VUE项目及排坑

一 . nodejs 安装

 Node.js https://nodejs.org/zh-cn/

二. 为了不占用C盘空间

 删除C:\Users\用户名\AppData\Roaming的npm文件夹

三. 设置新的安装路径

参考 原文链接：https://blog.csdn.net/tigerfish121/article/details/123119223

  （一），修改全局模块安装路径和cache路径
         1 在nodejs安装目录创建 “node_global” 和 “node_cache” 两个文件夹 （最好给够权限）

    2 在 cmd 窗口用下面命令修改路径

npm config set prefix "刚才新建的 node_global 文件夹的路径" 
npm config set cache "刚才新建的 node_cache 文件夹的路径"
例：
npm config set prefix "D:\mynodejs\node_global"

npm config set prefix "刚才新建的 node_global 文件夹的路径" 
npm config set cache "刚才新建的 node_cache 文件夹的路径"

 引号不能删，引号不能删，引号不能删
例：
npm config set prefix "D:\mynodejs\node_global"

    3 为了使安装的全局模块能直接在 cmd 窗口运行

将 node_global 文件夹的路径加入到系统环境变量PATH里

  （二），知识点补充

        1，全局模块

默认的安装路径是：
C:\Users\Administrator\AppData\Roaming\npm\node_modules
默认 -g 都会安装到这个目录 

      2，cache文件夹

cache 文件夹用来存放下载包的缓存
默认路径是：
C:\Users\用户名\cache 
————————————————

四.npm ERR!errno -4048 解决

参考原文链接：https://blog.csdn.net/wanlixingzhe/article/details/81020236

##问题：
npm ERR! errno: -4048,
npm ERR! code: ‘EPERM’,
npm ERR! syscall: ‘scandir’,

##解决：

1、删除npmrc文件，删除C:\Users\Administrator.npmrc文件
2、 C:\Users\Administrator\AppData\Roaming\npm-cache 清空，
3、删除项目下：node_modules，
4、用命令清理，控制台输入：
npm cache clean --force

引发问题：
cache到
C:\Users\Administrator\AppData\Roaming\npm-cache目录了，
配置的cache，不起作用了，待解决。 
cache=D:\Program Files\nodejs\node_cache

————————————————

五. mkdir 错误

 一般是文件夹权限问题用管理员运行cmd或者给文件夹赋权限解决

六. 查看vue安装路径

参考：https://blog.csdn.net/qq_51369065/article/details/119938098

1、cmd——执行where vue

2、如果你配置过npm的下载路径，那么vuecli就会被下载到你配置的路径中。

3、如果没有配置npm的下载路径，那么vue就会被下载到系统用户目录下

 查看vue cli的版本

                vue -V

————————————————

七. vue中的runtime+compiler 和 runtime-only

 参考：vue中的runtime+compiler 和 runtime-only - (⊙o⊙)买噶 - 博客园

1、runtime+compile：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//template -->ast(abstract syntax tree:抽象语法数)-->render函数 --> vdom(virtual 虚拟dom) -->UI

2、runtime-only：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  render:h=>h(App)
})

//render函数 --> vdom(virtual 虚拟dom) -->UI

3、runtime+compiler 和 runtime-only的区别

runtime+compiler 和 runtime-only的区别:只在main.js 不同
runtime+compiler：template -->ast(abstract syntax tree:抽象语法数)-->render函数 --> vdom(virtual 虚拟dom) -->UI
runtime-only：render函数 --> vdom(virtual 虚拟dom) -->UI
比较：
runtime-only 1、性能更高,因为不需要 ，template -->ast(abstract syntax tree:抽象语法数)这两步，2、代码量更少