mpvue读书--项目初始化

使用到vue和小程序语言
关于vue基础本文不做讲解，可以自行查询学习

---

---

简洁版步骤

• 命令行

vue init mpvue/mpvue-quickstart 项目名
cd 项目名
cnpm i
cnpm i sass-loader node-sass -D
code .

• 删除无用文件、页面、组件、代码
• webpack.base.conf.js注释eslint
• pages文件夹创建页面，components文件夹创建组件
• 运行项目
  • 命令行npm run dev
  • 微信开发者工具导入项目

---

详细版步骤

一、安装mpvue模版项目

• 安装模版项目

vue init mpvue/mpvue-quickstart 项目名

• 创建出项目名的文件夹，之后进入文件夹安装依赖包

cd 项目名
cnpm i

二、安装scss

上一步的依赖包安装的是模版项目在package.json中配置的内置依赖包
若要使用scss则要手动安装相应依赖包

cnpm i sass-loader node-sass -D

三、删除无用文件

安装下来的模版项目，不需要的页面和组件可以删除掉
关于模版项目的目录结构参考相关博客

四、注释eslint

mpvue项目模版webpack开启eslint，我们写的代码不符合规范会导致代码报错而跑不起来
这里先关闭

build–>webpack.base.conf.js里

rules: [
    // {
        // test: /\.(js|vue)$/,
        // loader: 'eslint-loader',
        // enforce: 'pre',
        // include: [resolve('src'), resolve('test')],
        // options: {
        //  formatter: require('eslint-friendly-formatter')
        // }
    // },
    ...
]

五、新建页面和组件进行测试

1. 新建页面

pages新建个人中心personalCenter文件夹里分别新建index.vue、index.scss、main.js、main.json
其中index.scss看个人情况，可写在index.vue中，也可以这样拆解出来

• main.js

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

• main.json

{
    "navigationBarTitleText": "个人中心"
}

同时不要忘了在最外层的app.json中配置新增的页面
app.json里配置页面

{
    "pages": [
        "pages/personalCenter/main"
        ...
    ],
    ...
}

2. 测试新建页面

页面创建成功后，运行代码和微信开发者工具测试一下，这里不做过多讲解

• 运行代码

npm run dev

• 微信开发者工具
  • 点击导入项目，选择本项目文件夹
  • 不需要进入文件夹中选src或是选dist，而是整个文件夹导入
  • 微信开发者工具即可自动寻找dist文件夹并运行

3. 新建组件

src–>components文件夹下，新建test.vue组件
在页面中引入组件，写法与vue相同这里就不演示了

测试引入成功，那么恭喜你，项目已经初始化完成了
可以进行小程序页面的编写了

---

万事不顺，查文档
mpvue五分钟教程
vue官方文档

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com