1、下载node.js:https://nodejs.org/en/download/

一路下一步安装完成后,确认环境变量中是否已经自动设置好(一般情况下在安装时就会设置成功),如果未设置则在Path中增加,如下图:

2、安装完毕之后,在命令行下验证是否安装成功:输入npm,显示如下就表示安装成功。


3、cnpm的安装,安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org。成功后显示如下:

4、vue-cli的安装,安装命令为cnpm install -g vue-cli。


5、安装完后,检查是否安装成功,输入vue,出现以下提示表示安装成功:


注意:一般情况下,你公司开发项目配置环境的时候,你从git或svn上拉下来的vue项目都是已经初始化过的,也就是说,在你本地安装vue时,根据实际情况可以跳过下面的步骤6,直接执行步骤7。初始化过得vue项目文件目录一般如下类似图:


6、初始化你的vue项目

cd到你的项目目录,例如:workFiles/vue-demo,工程名为vue-demo,则cd到workFiles目录,执行:执行vue init webpack vue-demo;注意其中【vue-demo】是你的工程名,请改为实际的名字。

按照如下图选择:


一路回车或Y,当在选择test时选择N,在选择e2e时选择N,最后选择最后一个选项,no(稍后手工启动)。

安装完成后的项目目录:


7、cd进入vue-demo目录内,执行cnpm install

安装完成之后,项目目录下多了node_modules:


8、运行项目:在命令行里输入 cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功。

注意,运行前一定要确保cd到vue项目目录下。



PS:1、在vue执行时如果有错误,请参考https://nodejs.org/api/errors.html。

2、确保你的vue项目定义的后台接口,和你后台项目启动时定义的服务接口对应一致。

3、记录一个比较常见的错误:

cnpm安装过程中提示optional install error: Package require os(darwin) not compatible with your platform(win32)解决方法:

运行cnpm install后,出现


虽然提示不适合Windows,但是问题好像是sass loader出问题的。所以只要执行下面命令即可;
方案一:
cnpm rebuild node-sass
#不放心可以重新安装下
cnpm install
方案二:
npm update
npm install
nodejs node_modules/node-sass/scripts/install.js
npm rebuild node-sass
 
一般只要执行方案一就够了。
然后再运行,OK。

Logo

前往低代码交流专区

更多推荐