vscode如何创建uni-app项目（以及cnpm的安装）

---

一、CLI工程全局安装

npm install -g @vue-cli

vue create -p dcloudio/uni-preset-vue uni-app

二、选择项目模板

1.hello uni-app模板

2.安装vue插件

cli工程自带uni-app&5+app语法提示

安装组件语法提示

3.下载uni-app代码块

从 git 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

4.使用scss样式

npm install node-sass

然后安装sass-loader，7.3.1版本
使用cnpm会快一些

cnpm insatll sass-loader@7.3.1

5.cnpm的安装

1.安装node
2.node -v 查看node是否已安装

3.安装淘宝镜像

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

4.查看cnpm是否真的安装成功 cnpm -v

出现cnpm不是内部或者外部命令，不要着急 配置电脑path变量

1.打开我的电脑
2.打开系统属性

3.高级系统配置

4.环境变量
5.path编辑

如果仍然出现 cnpm 不是内部或者外部命令

一般情况下，我们安装 Node.js环境，程序会自动把 NPM全局模块的路径设置在系统盘（通常是在 c盘下），我们在项目开发阶段不建议全局路径设置在系统盘，不但会影响到电脑的性能，而且还很不安全。可以通过以下命令来设置下载的全局路径目录:
输入命令，查看当前配置：

npm config ls

运行结果

如果是第一次使用NPM安装包的话，在配置中只会看到prefix的选项，就是NPM默认的全局安装目录。

但是如果有多次使用NPM安装包的话，就会看到cache和prefix两个路径，如下图

第一步：新建两个文件夹 node_global和node_cache

第二步：执行命令

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

成功后，使用npm config ls命令查看配置的结果

第三步：配置环境变量

在path变量名中，新建变量值：

%NODE_HOME%
%NODE_HOME%\node_modules
%NODE_HOME%\node_global\

第四步：安装cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org

安装成功

node_global文件中会出现

第五步：设置npm源

设置npm源，把默认源设置为淘宝镜像：
下面展示一些 内联代码片。

npm config set registry https://registry.npm.taobao.org

输入npm config ls检查，出现下图表示修改成功。

第六步：输入cnpm -v