Vue脚手架的简单使用实例

安装vue-cli

在命令行中执行

npm install -g vue-cli

。

创建模板项目

//vue init 模板名 项目名
vue init webpack simple

模板名可以在 https://github.com/vuejs-templates查看，推荐使用webpack。

之后使用

cd 项目名

进入项目根目录，使用

npm install

来自动安装项目依赖。

其他常用命令

项目根目录下执行

npm run dev

可以测试运行项目，执行

npm run build

可以正式编译项目到dist目录下。

目录结构

单文件组件

<template>
  <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
  <div>
    我是一个单文件组件
  </div>
</template>
<script>
export default {
  //无需写template，data仍然以函数返回，其他属性照旧
  data(){
    return {
    }
  },
  props:[],
  methods:{
  }
}
</script>
<!--这个scoped可以让这些样式仅在当前组件生效-->
<style scoped>
</style>

补充：在Vue脚手架中使用jquery和其他框架

在项目根目录安装jquery

npm install jquery

（注意大小写，jquery和jQuery不一样）。

build目录下的webpack.base.conf.js

开头加入

const webpack = require("webpack")

module.exports的最后加入（注意JS代码格式，不要忘了写逗号）

plugins: [
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })
]

之后，需要使用jquery的组件中导入juuery，如

<script>
  import $ from 'jquery'
  export default{
    data(){
      return {
        users:null
      }
    },
    created(){
      $.get("http://127.0.0.1:3000/all_user",function(data){
        this.users = data;
      }.bind(this))
    }
  }
</script>

使用其他js框架的方法链接