vue开发小程序Demo

1-准备

电脑安装好node.js环境，安装好npm，安装好微信web开发者工具，选择一款你喜欢的编辑器，我用的是WebStorm

2-打开webStorm，新建一个项目空间然后在终端执行以下命令，我这里是Windows下的WebStorm自带的Terminal

我是在红色区域输入的命令 ，执行以下命令

# 全局安装 vue-cli $ npm install --global vue-cli 
# 创建一个基于 mpvue-quickstart 模板的新项目 
$ vue init mpvue/mpvue-quickstart my-weixin 
# Project name 项目名称 my-weixin
# wxmp appid 小程序ID 去微信申请以后会得到 
# Project description 小程序描述 
# Author 作者 
# Vue build runtime # Use Vuex? 使用Vuex 
# Use ESLint to lint your code? 使用eslint依赖规范你的代码 

此时构建好工程项目后会提示下面的命令，照做就行了
# 安装依赖 $ cd my-weixin
$ npm install 
# 启动构建 $ npm run dev

3-构建好的标准项目，它比vue init webpack project-name 多了一些文件，如下图

 4-打开——微信web开发者工具，然后选择导入项目，路径直接定位到上图红色框的 .../dist/wx  文件夹下，点击导入，出现如下图，开发过小程序的朋友应该都熟悉这些操作和目录，看到的就是利用VUE开发的小程序了。

5-在webStrom编辑器里，根据构建的项目所附带的页面实例，去创建自己的更多小程序页面

我们就以src/pages/index为例,你也可以参考事例在scr/pages下新建一个文件夹，里面添加两个文件分别为:

# html  js css 都可以写到这个页面
1——index.vue 

# 可以在这里编写配置文件
2——main.js