Vue-cli

作者: 指尖轻敲 | 来源:发表于2018-07-09 17:23 被阅读0次

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>

相关文章

网友评论

      本文标题:Vue-cli

      本文链接:https://www.haomeiwen.com/subject/vkzxsftx.html