1. 安装node.js
    百度搜索node.js,然后选择对应的版本安装。
    安装完成后,运行windows的cmd窗口,运行以下命令校验node.js安装成功。
    这里写图片描述

  2. 安装终端工具
    百度搜索MobaXterm。
    安装后进行以下设置
    这里写图片描述
    设置完以后重启下运行以下命令校验安装成功及可以读取windows的环境变量
    这里写图片描述

  3. 用cnpm代替npm
    百度搜索cnpm,copy以下内容输入终端点回车。这样做的好处:由于cnpm和npm的版本不同,每次查找版本映射很麻烦,用下面的语句下次打cnpm的命令可以直接映射到npm对应版本的命令。
    这里写图片描述

  4. 安装vue-cli
    在终端输入以下命令安装vue-cli,运行以下命令”cnpm install vue-cli -g”
    这里写图片描述
    安装完成后在命令行输入
    这里写图片描述
    至此,脚手架工具安装完毕。

  5. 建立vue项目
    用 “vue list”命令查看模板
    用cd 命令行进入想创建项目的文件目录,然后用 “vue init webpack vuedemo3”命令创建新项目。
    创建项目过程中,会出现一些选项,根据下图选择
    这里写图片描述
    以我自己电脑为例,生成项目后会在以下路径创建目录
    C:\Users\Alex\Documents\MobaXterm\home\vuedemo3
    这里写图片描述

  6. 安装项目依赖
    用cd命令进入项目的目录,注意此目录中必须有”package.json”,运行命令”cnpm install”,这样就会安装package.json文件中的依赖包。

注意:如果这里用npm install的话,速度会很慢,但如果用 cnpm install的话会报:command not found,好像完成步骤3后把mobaxstream关掉第二次再再打开又不起作用了,这里需要把步骤3重新做一次。输完cnpm install命令后,这里等待时间较长,需要耐心等候。

安装完成后,项目中会多一个“node_modules”的文件夹。

运行命令 cnpm run dev ,在浏览器输入 http://localhost:8080/#/ ,顺利打开vue的默认页。至此,node服务器启动。
注意:如果mobaxstream界面中报8080端口错误,可能已经有vue项目在run了,需要先关掉Node.js: Server-side JavaScript这个进程

如果成功运行 cnpm run build,则项目中会生成dist文件夹,供部署使用。

Logo

前往低代码交流专区

更多推荐