初始化一个mpVue项目

环境搭建

一、软件及环境

• node.js
• VSCode 或 WebStorm

二、初始化一个项目

使用命令行，在相应的目录下执行以下命令即可

1.先检查下 Node.js 是否安装成功

$ node -v
  v12.16.1
$ npm -v
  6.13.4
           

2.由于众所周知的原因，可以考虑切换源为 taobao 源

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

3.全局安装 vue-cli

一般是要 sudo 权限的

$ npm install --global [email protected]

4.创建一个基于 mpvue-quickstart 模板的新项目

新手一路回车选择默认就可以了

$ vue init mpvue/mpvue-quickstart my-project

5.安装依赖，走你

$ cd my-project
$ npm install
$ npm run dev 

           

三、项目结构浅谈

• build

• config

  基于工程化的一些配置

• dist

  该文件夹需要执行 npm start 才能生成

  • wx 最终要在微信开发平台上部署的项目

    

• node_modules

    通过npm install 生成的目录，一般只需要在第一次编译的时候才需要执行该命令，该目录包含一些库文件

• src
  • components
  • pages

    

    

  • utils
  • app.json

    

  • App.vue

    

  • main.js

    

• static
• package.json    配置启动命令

  

四、用微信开发者工具编译该项目

1. 编译

   npm run dev

   编译成功

   

   编译成功会生成dist目录

   

2. 用微信开发者工具打开编译后的项目

   点击【导入项目】，取一个项目名，选择对应路径，填写appID号，导入即可

   

导入成功

五、总结

1. 配置node.js环境
2. 使用命令生成并初始化一个项目（也可在VSCode的终端执行这些命令）