Vue起手式

不圆
514 阅读3分钟

使用@vue-cli搭建一个项目

@vue-cli是一个基于Vue.js进行快速开发的完整系统。

安装@vue-cli

在bash里输入以下代码安装，使用npm或者yarn都可以：

npm install -g @vue/cli
yarn global add @vue/cli

安装后验证是否安装成功：

vue --version

创建和配置项目

在bash里输入：

vue create 项目路径

提示：这里可以用点 . 来表示当前路径。

回车后会提示你配置项目，可以选默认的，也可以自己选择合适的配置。

项目实时预览

配置完后会自动初始化项目，初始化完成后会看到这两句提示：

按照提示执行，就可以实时的预览效果了。

如果觉得上面的过程很繁琐，我们还有一个简单的办法：

在codesandbox创建一个vue项目

第一步，打开：CodeSandbox网站：

第二步，点右上角的 Create Sandbox：

第三步，选择项目模板：

OK，三步搞定项目创建，还自带预览功能：

Vue的版本

注：下面的非完整版指的是只包含运行时版

　版本生产环境版本特点体积
完整版vue.jsvue.min.js从HTML得到视图较大
非完整版vue.runtime.jsvue.runtime.min.js用JS构建视图较小

完整版 = 非完整版 + 编译器

非完整版 = 用来创建Vue实例、渲染并处理虚拟DOM

编译器：用来把模板字符串编译成JS渲染函数的代码；

从两个例子看下两个版本的区别：

完整版

创建一个项目，在public目录的index.html文件下引入vue.js完整版：

<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

然后在src目录下找到main.js文件：

new Vue({
  el:'#app',
  template:`<div>{{n}}</div>>`,
  data:{n:0}
})

这样可以在页面里看到n的值，或者这样写也可以：

// public/index.html
<div id="app">{{n}}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

// src/main.js
new Vue({
  el:'#app',
  data:{n:0}
})

这样也能达到同样的效果，这是因为完整版的vue.js里包含了编译器，只要是把HTML变成页面上的东西，完整版就是支持的，而不完整版这样写却是无效的。

非完整版(只包含运行时版)

在public目录的index.html文件下引入vue.js不完整版：

<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.runtime.min.js"></script>

在src目录下的main.js文件里写：

new Vue({
  el:'#app',
  render(h){
  	return h('div',this.n)
  },
  data:{n:0}
})

这里的h可以理解为createElement;

考虑加一个功能，点击一个按钮就让n的数值加1,先来添加按钮：

new Vue({
	el:'#app',
    render(h){
    	return h('div',[this.n,h('button','+1')])
    },
    data:{n:0}
})

再实现功能：

new Vue({
	el:'#app',
    render(h){
    	return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
    },
    data:{n:0},
    methods:{
    	add(){
        	this.n += 1
        }
    }
})

在APP.vue里实现功能

创建一个项目目录：

vue create vue-test

选完配置和初始化完成后：

// src/App.vue
<template>
	<div id="app">
		{{n}}
    	<button @click="add">+1</button>
	</div>
</template>

<script>
	export default {
    	name:'App',
        data(){
        	return {n:0}
        },
        methods:{
        	add(){
            	this.n += 1
            }
        }
    }
</script>

两个版本的区别

　完整版非完整版
特点有编译器(compiler)没有编译器
体积较大较小
视图写在HTML里或者template选项里写在render函数里，用h来创建标签
cdn引入vue.jsruntime.js
webpack引入需要配置alias默认使用此版
@vue-cli引入需要额外配置默认使用此版

完整版的vue.js文件里有编译器，编译器识别这样的代码：

@click="add"
<div>{{n}}</div>
v-if、v-for
this.n +=1

然后把代码编译成DOM节点。

但是非完整版不包含编译器，所以没有这个功能，但是可以通过webpack里的vue-loader来转换代码。而这个vue-loader用户是不用下载的，我们在开发的时候，就已经转换完成了。这样我们写还是写HTML，但是通过vue-loader给翻译过来，而用户下载不完整版(即支持h函数的版本)，体积更小，加载更快。

所以推荐使用非完整版，配合vue-loader和vue文件。

思路：

  1. 开发的时候，直接在vue文件里写HTML标签，而不用自己去写h函数；
  2. 然后用vue-loader把vue文件里写的HTML转为h函数；
  3. 用户下载的时候，JS文件体积更小，但是只支持h函数；
avatar
文章
阅读
粉丝