(一)项目的初始化 | 使用Vue搭建微信开发的脚手架

苟哥 2019-10-25 PM 1208℃ 0条

鉴于微信生态庞大的用户基础，所以基于微信公众号的二次开发还是很受欢迎的。最近有项目前端需要用到Vue，因此顺手做了个基于Vue的微信二次开发的项目脚手架，这个脚手架并不是一个完整的业务项目，它的定位只是当您遇到满足对应技术栈需求的项目时，能在它的基础上快速地进行项目的业务开发。

接下去会用几篇文章做个记录，第一篇主要讲项目的初始化，主要步骤如下：

一、Vue项目基于node环境，所以先安装node 8.9+

- 安装方法详见官网（官网文档是最好的指南）：   https://nodejs.org

- 设置淘宝镜像加快速度：

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

二、我们创建Vue项目时，使用的vue脚手架，所以需要先安装vue-cli3:

```shell
npm install -g @vue/cli
```

三、创建项目 wx-scaffold ：

```shell
 vue create wx-scaffold
```

交互式创建过程中，注意以下几点：

- 特性选择Babel、Router、Vuex即可，其他需要的后期再加：

![预装特性.png][1]

- router的mode选择history模式

- Babel、PostCSS、ESLint等使用单独的配置文件：

![配置文件.png][2]

四、安装好后看到的项目结构应该是这样的：

![目录结构.png][3]

进入项目目录并开启应用：

```shell
cd wx-scaffoldnpm run serve
```

看到如下界面说明安装成功：

![安装成功效果图.png][4]

五、修改文件

- 修改src/router/index.js ，删除about的路由块

- 修改App.vue，内容如下：

```html
  <template>      
      <div id="app">          
          <router-view/>       
      </div> 
  </template> 
  <style></style>
  ```

- 为了方便测试，修改 src/views/Home.vue 组件内容为：

```html
  <template>        
      <div>这是首页</div>
  </template>
  <script>        
      export default {              
          name: 'Home'        
      } 
  </script> 
  <style scoped> </style>
  ```

六、删除不需要的文件：

- 删除src/assets/logo.png
- 删除src/components/HelloWorld.vue
- 删除src/views/About.vue

七、创建文件夹:

- assets       //静态资源文件

- - /css      //css文件
  - /img     //图片文件

- common    //存放公共工具类库文件

- components   //公共组件

- - /content    //业务型公共组件
  - /common   //功能性公共组件

八、创建配置文件

- 项目目录下新建：vue.config.js ，增加内容如下：

```js
  module.exports = {    
      configureWebpack: {       
          resolve: {           
              alias: {  
                  //目录别名，方便后续引用               
                  'assets': '@/assets',               
                  'common': '@/common',               
                  'components': '@/components',               
                  'network': '@/network',               
                  'router': '@/router',               
                  'views': '@/views',          
              }      
          },       
          module: {           
              rules: [              
                  {                   
                      test: /\.less$/,                   
                      use: [                      
                          {                           
                              loader: 'less-loader',                           
                              options: {                               
                                  modifyVars: {// 直接覆盖vant里的变量                             						'tabs-line-height': '46px',                         
                                  }                          
                              }                      
                          }                  
                      ]              
                  }          
              ]      
          }  
      },   
      devServer: { //开发服务器相关配置           
          port: process.env.VUE_APP_DEVSERVER_PORT, //端口，由于开发过程是多人协作，所以端口应该放在环境变量配置      
      }    
  }
```
  
  
  
- 新建.env文件，并写入以下内容：

```js
  ;开发配置环境变量
VUE_APP_DEVSERVER_PORT=8080
  ```

- 因为这个文件是开发环境变量，各个开发人员拥有属于自己的配置，所以无需加入git版本控制，因此修改项目目录下的.gitignore文件增加一行：.env* ， 因为后续还有其他环境配置文件（例如线上环境变量配置.env.production）

九、初始化工作就到此为止，后续代码可以在GitHub上找到：

https://github.com/fudaoji/weixin-vue-scaffold.git

[1]: http://images.kuryun.com/blog/typecho/%E9%A2%84%E8%A3%85%E7%89%B9%E6%80%A7.png
  [2]: http://images.kuryun.com/blog/typecho/%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.png
  [3]: http://images.kuryun.com/blog/typecho/%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84.png
  [4]: http://images.kuryun.com/blog/typecho/%E5%AE%89%E8%A3%85%E6%88%90%E5%8A%9F%E6%95%88%E6%9E%9C%E5%9B%BE.png

标签: VueJs, 脚手架, VueJs实战项目

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：http://www.i366211.com/archives/23/

上一篇配置MySQL主从复制

下一篇 (二)部署UI框架 | 使用Vue搭建微信开发的脚手架

(一)项目的初始化 | 使用Vue搭建微信开发的脚手架

评论啦~

栏目分类

标签云

友情链接申请

(一)项目的初始化 | 使用Vue搭建微信开发的脚手架

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请