uni-app创建项目及使用 vant-weapp
<h3 id="创建项目">创建项目</h3><h5 id="一-使用-dcloud-公司提供的-hbuilderx-来创建项目">一、 使用 DCloud 公司提供的 HBuilderX 来创建项目</h5>
<ul>
<li>https://uniapp.dcloud.io/quickstart-hx</li>
</ul>
<h5 id="二-使用脚手架搭建项目--以微信小程序为例-">二、 使用脚手架搭建项目 ( 以微信小程序为例 )</h5>
<ul>
<li>
<p>全局安装 <code>npm install -g @vue/cli</code></p>
</li>
<li>
<p>创建项目 <code>vue create -p dcloudio/uni-preset-vue my-project</code></p>
<ul>
<li>选择模板(这里选择了默认模板)：<br>
<img src="https://img2020.cnblogs.com/blog/2115066/202104/2115066-20210429123336261-1068122599.png"></li>
<li>创建成功<br>
<img src="https://img2020.cnblogs.com/blog/2115066/202104/2115066-20210429123407781-1546699098.png"></li>
</ul>
</li>
<li>
<p>启动项目(微信小程序) <code>npm run dev:mp-weixin</code>，上一步中创建成功的提示中 <code>npm run serve</code> 运行的是h5，因为 uni-app 可以做不同的小程序，所以会有很多的运行和打包命令，具体的可以看项目的 <code>package.json</code> 文件。</p>
</li>
<li>
<p>运行成功后，将dist文件夹中dev文件下生成的对应的文件(mp-weixin)导入到微信开发者工具中</p>
</li>
</ul>
<h5 id="安装使用-scss-预编译语言-可选也可以使用less">安装使用 scss 预编译语言 (可选，也可以使用less)</h5>
<ul>
<li>安装 <code>npm install sass-loader node-sass</code></li>
<li>使用 <code><style lang='scss'></style></code></li>
</ul>
<h5 id="项目目录">项目目录</h5>
<pre><code>node_modules --> 项目的依赖
public
|-- index.html --> uni-app 开发网页应用时的模板
src
|-- pages --> 项目的页面组件
|-- static --> 项目的静态资源
|-- APP.vue --> 应用配置，用来配置APP全局样式以及监听
|-- main.js --> Vue初始化入口文件
|-- manifest.json --> 配置应用名称、appid、logo、版本等打包信息
|-- pages.json --> 配置页面路由、导航条、选项卡等页面类信息
|-- uni.scss --> 项目的scss全局变量
.gitignore
babel.config.js --> 处理javascript版本问题(ES6-->ES5)
package-lock.json
package.json --> 项目包的描述(运行/打包命令、所安装的第三方依赖)
postcss.config.js --> 定义如何编译css代码
README.md --> 项目的说明
tsconfig.json --> 项目使用ts开发时的配置
</code></pre>
<h3 id="使用-vant-weapp-ui库">使用 vant-weapp UI库</h3>
<h5 id="一-在跟目录下创建wxcomponents文件名不可更改在该目录下新建-vant-文件夹">一、 在跟目录下创建<code>wxcomponents</code>(文件名不可更改)，在该目录下新建 vant 文件夹</h5>
<img src="https://img2020.cnblogs.com/blog/2115066/202104/2115066-20210429123601928-507552923.png">
<h5 id="二-下载并引入vant-weapp">二、 下载并引入vant-weapp</h5>
<ul>
<li>下载地址：https://github.com/youzan/vant-weapp</li>
<li>将下载下来的 dist 文件夹中的内容复制到刚才新建的vant文件夹中</li>
</ul>
<h5 id="三-在-appvue-导入全局样式">三、 在 App.vue 导入全局样式</h5>
<img src="https://img2020.cnblogs.com/blog/2115066/202104/2115066-20210429123704382-38731731.png">
<h5 id="四-在-pagesjson-中引入对应的组件">四、 在 pages.json 中引入对应的组件</h5>
<ul>
<li>
<p>在某个页面中单独使用<br>
<img src="https://img2020.cnblogs.com/blog/2115066/202104/2115066-20210429123732215-1046562245.png"></p>
</li>
<li>
<p>在全局使用<br>
<img src="https://img2020.cnblogs.com/blog/2115066/202104/2115066-20210429123801097-31721563.png"></p>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/aloneer/p/14717513.html
頁:
[1]