使用到vue和小程序语言
关于vue基础本文不做讲解,可以自行查询学习
简洁版步骤
- 命令行
vue init mpvue/mpvue-quickstart 项目名
cd 项目名
cnpm i
cnpm i sass-loader node-sass -D
code .
- 删除无用文件、页面、组件、代码
webpack.base.conf.js
注释eslintpages文件夹
创建页面,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