vue.js学习10之动手使用vue-cli搭建项目及生成的代码进行修改练手

     在http://blog.csdn.net/dream_broken/article/details/73293391 这博文中已经了解如何使用搭建vue的开发环境了。这节自己动手实践下，并对生成的源码进行一些简单修改，加深对vue-cli生成的项目结构的了解。

    本人用的是Visual Studio Code这软件。

    已经安装node.js，dos下已执行

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

cnpm install -g vue-cli

打开终端，使用vue init webpack命令初始化生成项目vue-demo-02





Use ESLint to lint your code?的时候，写n，其他的一直回车键即可。



这样项目就生成了，看package.json，看依赖vue和vue-router都有了。

想让项目运行起来，由于是第一次，所以需要在项目的文件夹下执行cnpm install



然后执行cnpm run dev



浏览器自动打开或自己手动输入地址http://localhost:8080打开



修改下App.vue的代码，注释掉router



浏览器自动刷新了，页面只有上面的那个倒三角了

编写第一个components

在components文件下写

<template>
<div id="fistcomponent">
<h1>我是第一个component  </h1>
<a>my email {{ myemail }} </a>
</div>
</template>

<script>
export default {
data() {
return {
myemail : '269941633@qq.com'
}
}
}
</script>

App.vue修改为

<template>
<div id="app">
<img src="./assets/logo.png">
<!--  <router-view></router-view> -->
<firstcomponent></firstcomponent>
</div>
</template>

<script>

import firstcomponent from './components/component01.vue';

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

保存后，浏览器自动刷新页面了



    项目初始生成时App.vue有个<router-view>，我们也来玩玩。

先在components文件下再创建个component02.vue

<template>
<div id="secondcomponent">
<h1>我是第二个component </h1>
<a>我的电话 {{ tel }} </a>
</div>
</template>

<script>
export default {
data() {
return {
tel : '123456789'
}
}
}
</script>

App.vue

<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ message }} </h1>

<ul>

<li><router-link  to="/first" >第一页</router-link></li>
<li><router-link  to="/second" >第二页</router-link></li>

</ul>
<router-view class="view"></router-view>
</div>
</template>

<script>

export default {
data () {
return {
message : 'hello!!!'
}
}
}
</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>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router"

import firstcomponent from './components/component01.vue'
import secondcomponent from './components/component02.vue'

Vue.use(VueRouter);

// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [{
path: '/first',
component: firstcomponent
},
{
path: '/second',
component: secondcomponent
}
]
});

// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
router: router,
render: h => h(App)
}).$mount('#app');

浏览器自动刷新页面



 

   点击第一页就显示第一个component01.vue的内容，点击第二页就显示第二个component02.vue的内容。

  这2个component的数据都是写死的，实际开发中很多场景是需要从后台获取数据的，使用jquery的人都知道$.ajax.

现在我们使用vue-resource进行动态数据加载。

安装vue-resource

控制台先ctrl+c停止npm的运行,然后

cnpm install vue-resource --save



安装好了，package.json会看到依赖的东西



    

   豆瓣那有个公开的接口https://api.douban.com/v2/movie/top250?count=10，服务端已经设置允许跨越请求的了。

   写个component03.vue

<template>
<div id="threecomponent">

<h1 style="line-height: 36px; color: #20A0FF">豆瓣电影排行榜</h1>
<ul>
<li v-for="article in articles">
{{ article.title }}<img  :src='article.casts[0].avatars.small ' />

</li>
</ul>

</div>
</template>

<script>
export default {
data() {
return {
tel : '123456789',
articles:[]
}
},
mounted : function(){
this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
headers: {

},
emulateJSON: true
}).then(function(response) {
// 这里是处理正确的回调

this.articles = response.data.subjects
// this.articles = response.data["subjects"] 也可以

}, function(response) {
// 这里是处理错误的回调
console.log(response)
});
}
}
</script>

App.vue

<ul>

<li><router-link  to="/first" >第一页</router-link></li>
<li><router-link  to="/second" >第二页</router-link></li>
<li><router-link  to="/three" >豆瓣电影</router-link></li>
</ul>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router"
import VueResource from 'vue-resource'

import firstcomponent from './components/component01.vue'
import secondcomponent from './components/component02.vue'
import threecomponent from './components/component03.vue'

//开启debug模式
Vue.config.debug = true;

Vue.use(VueRouter);
Vue.use(VueResource);

// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [{
path: '/first',
component: firstcomponent
},
{
path: '/second',
component: secondcomponent
},
{
path: '/three',
component: threecomponent
}
]
});

// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
router: router,
render: h => h(App)
}).$mount('#app');

因为安装了vue-resource，所以启动之前，先cnpm install





点击豆瓣电影



项目打包

命令： cnpm run build

会在项目的文件夹下生成个dist文件夹，里面的文件就是了，把他们复制到比如nginx下，配置好路径，就可以访问了。