vue环境准备,
一、安装node.js,本地安装目录 D:\dev\nodejs
官网:https://nodejs.org/en/download/
二、设置nodejs prefix(全局)和cache(缓存)路径
1、在nodejs安装路径下,新建node_global和node_cache两个文件夹
2、设置缓存文件夹 & 设置全局模块存放路径
npm config set cache "D:\dev\nodejs\node_cache"
npm config set prefix "D:\dev\nodejs\node_global"
三、基于 Node.js 安装cnpm(淘宝镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
四、设置环境变量(非常重要)
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径
系统变量中PATH中增加node_global,用于存储全局安装的扩展
D:\dev\nodejs\node_global
用户变量中增加node_modules ,用于命令行执行安装的全局扩展,比如执行cnpm或者vue
NODE_PATH = D:\dev\nodejs\node_modules
系统变量中增加node.exe的路径,用于webstorm读系统node
NODE_PATH=D:\dev\node-v14.17.0-win-x64
注意看目录,两个变量必须同时设置
五、安装Vue
npm install -g @vue/cli
六、Vue编码规范
vue代码风格规范:https://cn.vuejs.org/v2/style-guide/
七、Vue浏览器调试插件 vue-devtools
因为使用的vue3,所以要找到正确的对应版本呢
推荐gitee国内找一下,下面地址可以下载直接使用
https://gitee.com/oxwanawxo/vue-devtools/releases/v6.0.0-beta.7
其他版本源码编译和使用参照
https://blog.csdn.net/li22356/article/details/113092495
八、新手入门,教程比较基础
vue入门,慕课网免费课程
其中一节课的地址:
https://www.imooc.com/video/18561
教程中用的vue/cli3,我学习的时候最新版本是vue/cli4了,所以,有差别!比如devtools使用,比如组件单独测试
看别人如何卸载cli4,安装cli3,链接地址里面还有其他注意事项:
https://blog.csdn.net/qq_40515375/article/details/108180622
npm uninstall -g @vue/cli
npm install -g @vue/cli@3.0.4