初始化一個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的終端執行這些指令）