vue从零开始

一、环境配置什么的看上一篇博客，这里简单提两句

1、安装webpack

cnpm install webpack -g

2、安装vue脚手架

npm install vue-cli -g

二、项目开始

1、cd进入目录路径

2、进入目录创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>
或者创建 vue1.0 的项目
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

3、cd进入创建的工程目录，目录结构如下图

4、安装依赖，注意这里用npm install 安装，不要用淘宝的镜像安装

5、安装 vue 路由模块vue-router和网络请求模块vue-resource

   cnpm install vue-router vue-resource --save

6、npm run dev  启动项目

如果没有其他问题会看到项目启动起来

三、先玩一下组件

1、在App.vue中编辑

第一。一个组件下只能有一个并列的 div，可以这么写，所以复制官网示例的时候只要复制 div 里面的内容就好。

第二。数据要写在 return 里面而不是像文档那样子写

 

Vue 的组件的使用。

在工程目录/src下创建component文件夹，并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。

<div id="firstcomponent">
<h1>I am a title.</h1>
<a> written by {{ author }} </a>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
author: "微信公众号 jinkey-love"
}
}
}
</script>
<style>

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了<div id="app"></div>所以就以这个组件作为主入口，方便 )
第一步，引入。在<script></script>标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

第二步，注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!

export default {  data () {    return {      msg: 'Hello Vue!'    }  },  components: { firstcomponent }}

第三步，使用。
在<template></template>内加上<firstcomponent></firstcomponent>

<template>  <div id="app">    ![](./assets/logo.png)    <h1>{{ msg }}</h1>    <firstcomponent></firstcomponent>  </div></template>

完成后的代码：

这时候看看浏览器上的 http://localhost:8080/ 页面(之前打开过就会自动刷新)，如果你没看到效果是因为你没有对 App.vue 和 firstcomponent.vue 进行保存操作，保存后页面会自动刷新。

使用路由搭建单页应用

在webpack.config.js加入别名

resolve: {    alias: {vue: 'vue/dist/vue.js'}  }

修改完之后的webpack.config.js是这样子的:

var path = require('path')
var webpack = require('webpack')


module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
 
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
 resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}


if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

再按之前的方法写一个组件 secondcomponent.vue

<template>
  <div id="secondcomponent">
    <h1>I am another page</h1>
    <a> written by {{ author }} </a>
    <p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>
  </div>
</template>


<script>
export default {
  data() {
    return {
      author: "微信公众号 jinkey-love",
      articles: [],
    }
  }
  }
</script>


<style>
</style>

并且配置路由规则和 app 启动配置项加上 router，旧版的 router.map 方法在 vue-router 2.0 已经不能用了。修改后的main.js如下:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource'
//开启debug模式
Vue.config.debug = true;


Vue.use(VueRouter);


// 定义组件, 也可以像教程之前教的方法从别的文件引入
const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }
import secondcomponent from './component/secondcomponent.vue'


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


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