Vue学习从入门到精通(一)

  最近公司由于业务拓展,需要进行小程序相关的开发,本着朝全栈开发者努力,决定学习下Vue,去年csdn送了一本《Vue.js权威指南》,那就从这本书开始练起来吧。哟吼。
###一,环境搭建
今天主要说一下如何搭建环境,以及如何运行。
####1,npm安装

brew install npm

如果brew没有安装的话,大家可以brew如何安装哦,这里就不再详细说明了。
####2,安装vue-cli
vue-cli是用node编写的命令行工具,因此需要进行全局安装。

 npm install -g vue-cli

注:node的版本为4.x,及5.x及以上
安装完成后,查看版本

vue -V

###二,创建并运行项目
环境安装后,我们可以使用vue-cli命令快速创建一个webpack构建的项目

vue init webpack helloworld

我在当前目录创建了一个helloworld的项目。然后我执行

cd helloworld//跳转到该目录

执行下面的命令来安装依赖

npm install

我们会看到当前目录生成了很多的文件,其中我们主要是在src这个文件夹下进行相关的操作的。执行如下命令,启动项目

npm run dev

打开浏览器,输入http://localhost:8080可以看到系统默认生成的页面了。

这里写图片描述
本来是有一个Vue的图标的,被我给去掉了,方便后面的调试。
###三,Vue.js 权威指南的第一个demo
一切准备就绪,接下来我们开始练习《Vue.js权威指南》这本书中的demo,在网上找了许久,也没有找到书中的源码,很是遗憾啊。第一个demo的代码保存为jk.vue
我这边将第一个demo的代码如下:


<template>
	<div id = "didi-navigator">
		<ul>
			<li v-for="tab in tabs">
				{{tab.text}}
			</li>
		</ul>
	</div>
</template>
<script>
export default {
name:'HelloWorld',
data(){
	return {
   tabs:[
        {text: '巴士'},
		{text: '快车'},
		{text: '专车'},
		{text:'顺风车'},
		{text:'出租车'},
		{text:'代驾'}
		]
  }
}
}
</script>


大家可以看到我这里和书上不太一样,主要就是我这里app.js已经创建过了,所以我这边没有必要执行new Vue这些操作了,具体原因后续会详细说明。
App.vue中代码如下:

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/jk'

export default {
  name: 'App',
  components: { HelloWorld }
}
</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>

由于style还有学到,大家不要介意样式不好看啊。嘿嘿
运行结果如下:这里写图片描述
在这里插入图片描述
更多优质文章,可以微信扫码关注:
这里写图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页