脚手架搭建项目
- 全局安装
npm install -g @vue/cli
- 创建项目
cd到项目文件夹(不用新建uni-app文件夹,下面的语句会自动创建的,my-project就是uni-app项目名称)
vue create -p dcloudio/uni-preset-vue my-project
提示选择模板。选择默认模板。
之后提示cd到项目目录,并运行小程序
输入cd my-project
运行服务不要输入 run serve.而是往下执行第3步
npm install sass-loader@10.1.1
npm install node-sass@4.14.1
- 启动项目(微信小程序)
npm run dev:mp-weixin
看到这个提示说明成功了,接下来导入项目。
- 微信开发者工具导入项目
打开微信开发者工具,点击巨大的 + 号,选择导入项目,在目录点选刚才新建的项目目录,进入my-project
文件夹,点击dist - dev - mp-weixin
, 选择文件夹。例如,我的路径是:
E:\WebDevelopment\MyUniProject\my-project\dist\dev\mp-weixin
点击导入 后,出现 uni-app 的 Hello 界面,就说明导入成功了。
5. 搭建过程中可能出现的问题
① vue 和 vue-templte-complier 版本不一致
根据提示重新安装对应的vue版本即可。npm install vue@2.6.10
然后重新运行项目: npm run dev:mp-weixin
②当安装sass
时,使用 npm i node-sass sass-loader ,再在项目中运行时,可能会出现编译失败的问题,
error in ./src/pages/index2/index.vue?vue&type=style&index=0&lang=scss&
原因是sass
版本太高了,降级版本:
npm install sass-loader@10.1.1
同时降级node sass
版本,先卸载,再重新安装:
npm uninstall node-sass
npm install node-sass@4.14.1
或者, 如果使用 yarn (default in newer CRA versions)
yarn remove node-sass
yarn add node-sass@4.14.1
Vue目录结构介绍
文件夹my-project
右键用Visual Studio Code打开。整个目录中最重要的部分是src
目录。其它的只要做了解即可。
static
目录内不要放样式,因为脚手架不会对这里面的样式做编译。
在pages
下新增一个页面,一定要在pages.json
里面同样新增一个pages
. pages.json
谁在前面,谁就是首页。
在Visual Studio Code修改代码保存后,在微信开发者工具可预览小程序页面。
插件安装
在vscode 插件市场搜索vetur
, 安装vue语法提示插件
安装组件语法提示:
npm i @dcloudio/uni-helper-json
更多介绍见官方文档:当 uni-app 遇见 vscode
样式和sass
rpx
小程序中的的单位。
750rpx = 屏幕宽度
vw
h5 单位
100vw = 屏幕宽度
100vh = 屏幕高度
在uni-app中使用sass
, 需要安装依赖:
cd到my-project
:
npm i node-sass sass-loader
重新启动应用:
npm run dev:mp-weixin
在style
标签里添加 lang="scss"
如果运行出现错误,请见 5. 搭建过程中可能出现的问题
计算属性
<view>{
{
money }}</view>
<view v-for="item in filterList" :key="item.id">{
{
item.text }}</view>
<script>
export default {
data() {
return