一、那么我们就从最简单的环境搭建开始:

安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。




mvn pom镜像源 npm镜像库怎么搭建_mvn pom镜像源


这里需要说明下,因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。

安装淘宝镜像,打开命令行工具,把这个(npm install -g cnpm --registry=https://registry.npm.taobao.org)复制(这里要手动复制就是用鼠标右键那个,具体为啥不多解释),安装这里是因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候很很慢很慢超级慢,所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v,如下图,如果出现相应的版本号,则说明安装成功。


mvn pom镜像源 npm镜像库怎么搭建_mvn pom镜像源_02


方法一:

使用阿里定制的cnpm命令行工具代替默认的npm,输入以下代码

npm install -g cnpm --registry=http://registry.npmmirror.com

检查是否安装成功:

$ cnpm -v

安装成功之后,以后安装依赖包的方式和npm的是一样的,只是npm的命令换成是cnpm就可以了。

==================

安装webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。


mvn pom镜像源 npm镜像库怎么搭建_Powered by 金山文档_03


安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。


mvn pom镜像源 npm镜像库怎么搭建_版本号_04


二、通过以上四步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目

=======================================================

三: 创建项目

1 创建项目:


mvn pom镜像源 npm镜像库怎么搭建_版本号_05


mvn pom镜像源 npm镜像库怎么搭建_mvn pom镜像源_06


mvn pom镜像源 npm镜像库怎么搭建_mvn pom镜像源_07


mvn pom镜像源 npm镜像库怎么搭建_Powered by 金山文档_08


2 执行命令:


mvn pom镜像源 npm镜像库怎么搭建_vue.js_09


切到文件夹下边, 启动脚手架内置的webpack开发服务器, 开发服务器运行再了8080端口上


mvn pom镜像源 npm镜像库怎么搭建_版本号_10


3 浏览器输入地址:


mvn pom镜像源 npm镜像库怎么搭建_命令行工具_11


看到这个页面说明,我们成功创建了脚手架项目,同时启动成功

报错1:


mvn pom镜像源 npm镜像库怎么搭建_版本号_12


初始状态查看vue版本:vue -V,显示2.9.6,再进行创建vue项目时出现以下情况:

以上翻译:vue create是Vue CLI 3的唯一命令,而你正在使用Vue CLI 2.9.6。

你可能想运行以下程序来升级到Vue CLI 3:

npm uninstall -g vue-cli

npm install -g @vue/cli

这是由于安装的版本太低,需要更新vue,第一步:命令框输入:npm uninstall vue-cli -g


mvn pom镜像源 npm镜像库怎么搭建_mvn pom镜像源_13


此时,已经将旧版本删除,接下来安装新版本vue,第二步:命令框输入:npm install -g @vue/cli


mvn pom镜像源 npm镜像库怎么搭建_命令行工具_14


此时,已经将新版本安装完成, 接下来查看vue验证是否已经更新到新版本,命令框输入:vue -V


mvn pom镜像源 npm镜像库怎么搭建_vue.js_15


验证完毕,此时已经更新到5.0.8,下一步就可以创建vue项目了

=======================================

报错2 :


mvn pom镜像源 npm镜像库怎么搭建_版本号_16


报错原因

node的版本对应不上,项目要求的是"^12.22.0 || ^14.17.0 || >=16.0.0",而自己电脑上的是"14.15.1" 版本

解决方式:

cpm输入运行以下命令: yarn config set ignore-engines true

四 清理欢迎界面


mvn pom镜像源 npm镜像库怎么搭建_mvn pom镜像源_17


五 文件夹和文件含义, 关键文件里代码意思


mvn pom镜像源 npm镜像库怎么搭建_版本号_18


mvn pom镜像源 npm镜像库怎么搭建_版本号_19


mvn pom镜像源 npm镜像库怎么搭建_版本号_20


mvn pom镜像源 npm镜像库怎么搭建_vue.js_21


六 单vue文件讲解


mvn pom镜像源 npm镜像库怎么搭建_命令行工具_22