vue&uniapp环境搭建以及项目创建（webstorm）

• 以下是针对webstorm用户上手uniapp框架的学习

vue环境搭建以及配置（脚手架搭建）

• 首先要明确三样东西

  • npm：node.js的包管理器
  • webpack：主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备，比如资源的合并和打包。
  • vue-cli：学习vue的过程会知道这是vue的脚手架，用于生成vue的功能模板。帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要npm install 就可以安装。

• nodejs下载网址：https://nodejs.org/en/

• 下载好之后安装，一直下一步就可以，安装位置可以换到自己熟悉的位置
  
  

• 安装好后可以在文件夹中找到nmp.cmd。
  
  

• 然后在命令行界面查看是否安装成功

• 建立如图两个文件夹：模块文件夹待会会改变位置，不管

• 然后运行以下两条命令，目的是修改系统默认的缓存位置（系统默认在c盘的programfile里）

• /***************一定要以管理员模式启动cmd界面！！！切记！！

• npm config set prefix "D:\nodejs\node_global"

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

• 到这一步可以选择配置国内镜像以提高速度（有时候国内镜像会出问题，yysy，还是得梯*子）

• 找到C:\Users\Administrator.npmrc，查看内容，可以看到刚才修改的默认信息。

• 接下来还需要调整环境变量，进入修改界面，先修改系统变量：

  • 添加变量 NODE_PATH，变量值如下图
    
    

• 修改用户变量“Path”

  • path内会找到一个生成的node相关路径，修改成自定义的node_global如下图：

• 到这一步，配置就完成了，我们来测试一下。

• 测试可以用express模块，这是最常用的。

• 进行全局安装

• npm install express -g # -g是全局安装的意思

• /如果报错，说明你又没开管理员模式/

• 安装完express模块可以在之前设置的全局路径里找到，即node_global

• 如果你已经安装过express，它也会报错，就像这样
  
  

• 这时候，我们来安装vue.js

• npm install vue -g //npm和-g的意思上面已经说过

• 可以在全局目录下找到安装好的vue，

• 我们在nodeglobal目录下找到了安装的vue（最开始提到的node_modules文件夹此时也出现在这里）

• dist是distribution的缩写，为最终发布产品

• 查看vue版本时的命令行为：

• vue -V //特别的，查看vue版本时的-V为大写

• 然后安装vue脚手架的init模块：

• 切换为d盘，且为根目录

• npm i -g @vue/cli-init

• 进行vue项目初始化

• vue init webpack vue1 //vue1为创建的文件夹名称

• 前三个部分可以自己命名填写，不建议大写，之后就会开始自动建立项目
  
  

• 初始化：

成功！打开提示地址就可以看到vue界面

• 然后就可以用webstorm打开vue1查看自己的代码（图转）

---

初始化uniapp项目：

• npm install -g @vue/cli

• 要create一个uniapp项目，cli版本必须至少为3.0，不然执行下一步会报错（当然报错的时候它会告诉你版本太旧了，让你uninstall再install，就像这样）
  
  

• vue create -p dcloudio/uni-preset-vue my-project //my-project为项目名
  
  

• 此时会提示选择项目模板：
  
  

创建完就可以用webstorm打开了

• CLI 工程默认带了 uni-app 语法提示和 5+App 语法提示

• 运行项目

• npm run dev:%PLATFORM%

• Hbuilder配置uniapp项目

• 首先，配置你之前安装好的node.js路径和npm路径

• 然后看官网教程(^_)https://uniapp.dcloud.net.cn/quickstart-hx