Vue-cli

vue.js 官网链接

vue-cli安装

安装vue

npm install vue//最新稳定版本

全局安装vue-cli(脚手架)

windows：

npm install -g vue-cli 

mac：

sudo npm install -g vue-cli

*查看vue命令

vue

vue可执行的命令和参数：
 Commands:

    init        generate a new project from a template
    list        list available official templates
    build       prototype a new project
    help [cmd]  display help for [cmd]

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

用webpack模板初始化一个vue项目

vue init webpack my-first-project

提示信息：
  This will install Vue 2.x version of the template.
  For Vue 1.x use: vue init webpack#1.0 sell

? Project name (sell) //默认项目名字,直接回车就可以
? Project name sell
? Project description (A Vue.js project) elema app //对项目的描述
? Project description elema app
? Author (wangjunwei <wangjunwei@shediao.com>)
? Author wangjunwei <wangjunwei@shediao.com>
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) //es6的代码分风格检查器，yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? (Y/n) //单元测试的工具，先不用安装n
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) no
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "sell".

   To get started: //提示你应该怎么操作

     cd sell
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

进入my-first-project项目安装依赖，并且启动

npm run dev命令启动成功后，浏览器访问localhost:8080即可

cd webpack my-first-project/
npm install
npm run dev

目录结构：
build和config目录：是webpack配置相关。
src目录：下是需要自己操作的
static目录：下存放静态资源。
package.json：是配置文件，想配置执行的脚本，直接加在scripts属性中。

注意：如果npm版本低于3.0.0会报错，更新npm

npm install npm -g

.vue文件模板

.vue文件会通过webpack的vue-loader转换成正常可运行的js文件。

• template下只能有一个子标签，所有标签都需要在这个标签里面去写。

• 组件的data属性这里需要是一个函数，返回一个对象的形式，vue实例中是一个对象。

• 样式标签中最好加scoped关键字，让其在当前组件中生效，不影响其他组件。

<template>
  <div class="hello">
    <ul>
      <li
        v-for="(item, index) of list"
        :key="index"
        :content="item"
      >{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  mounted (){
      this.$http.get('../../static/package.json').then(function(res){
          this.list= res.body;
          console.log(this.list);
      });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>