VSCode部署vue-cli项目全过程记录

一、环境准备

1.1、nodejs安装

打开官网：https://nodejs.org/en/download/

下载对应的版本

直接点击安装，下一步，next

其中有个步骤中，有一个automatically install the necessary tools,note that this will also install chocolatey, the script will pop-up in a new window after the inatallation completes。打勾，即可自动安装必需的工具。

验证安装成功的标志，如下图

1.2、全局安装vue-cli

安装命令

npm install -g vue-cli

1.3、安装webpack, 它是打包js的工具

安装命令：

npm install -g webpack

二、构建vue项目

2.1、切换目录，到你要保存项目的目录下

如：

在c:\java\javaPrj目录下创建vue项目

2.2、创建vue项目

命令：

vue init webpack myvue

项目名称：自己取名

箭头部分是敲回车即可，yes和no 处是选择，y/n

然后等下载

2.3、查看qgvue项目

在项目目录下，可以看到项目下完了

2.4、运行项目

其实在创建项目后，npm就会告诉你，接下来怎么做

有两步要做，一是切换目录，二是运行

命令：

npm run dev

2.5、查看结果

上图红框处，已经告诉你访问地址

打开浏览器，输入地址，即可

以上说明都搞完了，且成功了！

三、vscode中创建vue工程

3.1、打开vscode， file-->open folder 打开要存储项目的目录

3.2、打开终端

按ctrl + ~

3.3、创建项目qgvue

命令：vue init webpack qgvue

稍等

等待下载，安装依赖

稍后

3.4、运行项目

同样有提示接下来的操作命令

cd qgvue

npm run dev

敲完命令后，稍等

3.5、查看结果

浏览器中，输入localhost:8080

四、导入一个现成的项目avue-cli

4.1、准备一个现成的项目

ctrl+~ 调出终端，执行下面的命令，从git上下载项目

git clone https://gitee.com/smallweigit/avue-cli.git

等待，下载

4.2、切换目录到avue-cli

cd avue-cli

4.3、安装依赖

命令：

npm install --registry=https://registry.npm.taobao.org

稍等

4.4、运行项目

执行命令

npm run serve

4.5、查看结果

五、问题汇总

5.1、如果在运行项目时，npm run dev，报错

说明没有找到sass 查看node-sass文件，没有内容

解决方案：直接在当前目录下进行node-sass 的数据源设置
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
安装依赖：
# 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

 

更多知识，请关注公众号：qghktit