Vue入门开发_vue create -p

脚手架搭建项目

1. 全局安装

npm install -g @vue/cli
1

2. 创建项目
   cd到项目文件夹（不用新建uni-app文件夹，下面的语句会自动创建的，my-project就是uni-app项目名称）

vue create -p dcloudio/uni-preset-vue my-project
1

提示选择模板。选择默认模板。
之后提示cd到项目目录，并运行小程序

输入cd my-project
运行服务不要输入 run serve.而是往下执行第3步

npm install sass-loader@10.1.1
npm install node-sass@4.14.1
1
2

3. 启动项目（微信小程序）

npm run dev:mp-weixin
1

看到这个提示说明成功了，接下来导入项目。

4. 微信开发者工具导入项目
   打开微信开发者工具，点击巨大的 + 号，选择导入项目，在目录点选刚才新建的项目目录，进入 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
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
1
2
3
4
5
6
7

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
1

重新启动应用：

npm run dev:mp-weixin
1

在style 标签里添加 lang="scss"
如果运行出现错误，请见 5. 搭建过程中可能出现的问题

计算属性

<view>{
   {
    money }}</view>
<view v-for="item in filterList" :key="item.id">{
   {
    item.text }}</view>

<script>
export default {
   
 data() {
   
   re
1
2
3
4
5
6
7
8
9
10
11
12