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

webpack 是 JavaScript 打包器(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% 可取值如下：

值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	头条小程序
mp-qq	qq 小程序

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手机版，等待自动完成，完成后终端可看导出路径，然后部署到服务器即可。

官网

插件