02_Vue-cli

Vue脚手架

1.准备工作

安装 npm

npm 全称为 Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

由于网络原因 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 vue-cli

cnpm install -g @vue/cli

安装 webpack

webpackJavaScript 打包器(module bundler)

cnpm install -g webpack

2.开始

首先在要创建的文件夹内打开终端,键入vue ui进入vue图形化创建界面

创建新项目–>新项目命名–>package管理器选择npm–>下一步–>默认设置–>创建项目

在终端查看创建进度,创建完毕后关闭终端和vue ui界面。

在以后可以随时打开vue ui页面配置相关信息,如插件,依赖,任务等选项。

3.目录结构

public

打包后部署到生产环境的公共资源文件

src

开发目录

components

组件目录

HelloWorld.vue

单文件组件

App.vue

项目的入口文件,完成对组件的引入工作,如引入HelloWorld.vue。

4.运行

在vscode中:终端–运行任务–npm–npm:serve 复制生成的本地路径打开浏览器输入地址即可。

webstorm

方法一:

​ 利用vue ui命令生成项目后,进入项目

​ 右键package.json,选择show npm 出现serve选项后点击 自动生成本地路径,复制生成的本地路径打开浏览器输入地址即可。

方法二:

​ 在webstorm中创建vue项目

​ 创建好后直接点击运行按钮,复制生成的本地路径打开浏览器输入地址即可。

5.新建单文件组件

单文件组件分为三个区域:

<template><\template>视图区域

<script><\script>脚本区域

<style></style>样式区域

<template>
  <div>
    <h2 class="red">你好啊 Vue</h2>
  </div>
</template>

<script>
export default {
    name: "HelloWorld",
    props: {
    msg: {
        type: String,
        default: "test Vue",
    }
    },

    methods:{

    },

    data(){
        return {

        }
    }
};
</script>

<style>
.red{
    color: aliceblue;
}
</style>

6.在入口文件中局部注册并使用

  1. import引入

  2. 注册

  3. 添加标签使用

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
      <!--3.使用组件-->
    <test></test>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
    //1.引入组件
import test from './components/test.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
      //2.注册组件
    test
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

uni-app框架

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,其官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。

不过,由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode,不想更换编辑器。

直接使用 vscode 开发 uni-app,其体验并不是很好。

vscode

参考文档

博客1

通过 CLI 创建 uni-app 项目

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

此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板

安装组件语法提示

组件语法提示是uni-app的亮点,其他框架很少能提供。

cnpm i @dcloudio/uni-helper-json

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块,放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

运行项目

复制代码npm run dev:%PLATFORM%

发布项目

复制代码npm run build:%PLATFORM%

%PLATFORM% 可取值如下:

平台
h5H5
mp-alipay支付宝小程序
mp-baidu百度小程序
mp-weixin微信小程序
mp-toutiao头条小程序
mp-qqqq 小程序

CLI 方式参考文档

HBuilder-X

步骤

新建----新建项目----uni-app----项目名称,默认模板----创建

目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DxRWgSdL-1593505059652)(F:\vuelearn\images\uni-app目录结构.png)]

运行

运行----运行到浏览器 等待编译完毕自动打开

发行

发行为网站-H5手机版,等待自动完成,完成后终端可看导出路径,然后部署到服务器即可。

官网

d=_2-通过vue-cli命令行)

HBuilder-X

步骤

新建----新建项目----uni-app----项目名称,默认模板----创建

目录结构

[外链图片转存中…(img-DxRWgSdL-1593505059652)]

运行

运行----运行到浏览器 等待编译完毕自动打开

发行

发行为网站-H5手机版,等待自动完成,完成后终端可看导出路径,然后部署到服务器即可。

官网

插件

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值