一. 下载安装:
直接在node.js官网下载LTS稳定版本,并默认选择项傻瓜式进行安装即可 (win7最高支持版本13)。
安装好之后在dos窗口中检查:
二. 安装好后,创建项目前的步骤
1. 切换淘宝npm库,执行命令:(两者选其一即可)
方式一:npm config set registry https://registry.npm.taobao.org
方式二:npm install -g cnpm --registry=https://registry.npm.taobao.org
之后切记执行命令:npm config list 检查配置是否生效。
2.安装vue-cli脚手架和客户端
命令: npm install -g @vue/cli --force
在执行这个命令时,报了一大丢错(不过输入命令vue ui也可以顺利跳转到浏览器界面),部分显示如下:
最后把C盘上面画线的文件夹删掉后(C盘那些npm文件夹内容应该是之前卸载的nodejs留下的,之前vue-cli装在C盘),再次执行该命令不再报错了。
[ vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:
vue init webpack xxx (这是命令行的方式--繁琐)
注1:xxx 是创建项目的名称
注2:vue-cli脚手架里含有了vue,可输入命令:vue -version或者vue -V(大写)验证
注3:必须先安装vue,vue-cli,webpack,node等一些必要的环境 ]
3.输入命令跳转到客户端首页,能成功跳转说明OK了。
三. 使用脚手架vue-cli(2.X版)来构建项目
1.创建项目
说明:如果想要将vue项目创建在 D:\mytest/code 目录下,那我们需要在该目录内地址栏输入cmd打开DOS窗口执行 vue ui命令实现跳转,这时就自动跳转到该目录下了,直接创建即可。
在"功能" 这一步选择了Router和"使用配置文件";
“配置”这一步选择了2.0版本和 ESLint+Standard config;其他都保持了默认。
(客户端的方式比命令行的方式更直观)
2.初始化项目
1)安装element ui 插件:直接搜element;
2)安装axios依赖:安装的“运行依赖”
3. 测试
4.关闭代码校验
5.用HBuilder打开所建的项目
6.将上面src目录换掉,再次编译时报错如下:
解决方法:
1) 通过命令行的方式安装开发依赖 less-loader :(因为搜索到的依赖版本太高,不兼容)
具体操作为:在VUE项目的根目录启动执行安装命令:npm install less-loader@5.0.0
2) 安装开发依赖 less
到此再运行就成功了。
四. 报错解决(8.10第二次做时补)
遇到上面的错误,根据提示,将上面的命令在cmd出口运行一下就OK了。
遇到上面的错误,在cmd窗口中分别运行:npm install --save quill
npm install --save vue-quill-editor 就OK了。
五. 报错解决(2022.1.16第三次做时补)
第三次又遇到了上面的错误,按照提示的命令没有解决,然后在下面图示中搜索对应的依赖,安装之后可以了。
六. 相关DOS命令
检查nodejs版本和npm版本命令见上: node -v 和 npm -v
更新npm版本命令----最新版本: npm install npm@latest -g
----指定版本: npm -g install npm@6.14.13
查找nodejs安装位置: where node