今天我们来谈一谈Vue的相关事宜。
环境的搭建,网上教程很多,而且也很方便,我就不细说了。
然后我们新建一个文件夹作为它的工作环境——workspace。之后控制台进入到这个文件夹里面,然后执行下面代码来创建我的第一个项目。
vue init webpack 项目名
创建好了之后,就会有这样一个文件夹,里面的文件分布如下所示:
我们简单的来说一说这些文件夹:
build:项目构建的相关代码。
config:配置目录,包括端口号等。
node_modules:npm加载的项目依赖模块。
src:开发目录。
- asserts:放置了一些图片,如logo等。
- components:目录里面放了一个组件文件,可以不用。
- App.vue:项目入口文件。
- main.js:项目的核心文件。
static:静态资源目录,如图片,字体等
index.html:首页入口文件,可以添加一些meta信息或统计代码。
package.json:项目配置文件。
README.md:项目的说明文档,markdown格式。
之后我们进入在控制台上这个文件夹中
cd mytest
然后运行下面这段代码开启项目
npm run dev
用浏览器打开:
结束项目的命令行为
ctrl + C 然后选择y
下面我们就要来修改页面了。
App.vue是整个网页的首页面,然后它又引用了HelloWorld.vue。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
我们可以修改data中的msg的内容来改变页面内容,比如我设置msg为“Hello World”,则最后页面呈现为: