简单使用vue-cli

　　上一篇咱们简单的看了看vue的基本用法，就是三步，首先就是用<script>标签引入vue的依赖，而后就是写html标签，在标签中用vue指令绑定一些属性，最后就是new Vue(xxx)实例，在这个实例中有不少的实例属性能够给html标签中那些绑定的属性赋值、或者是绑定事件函数；

　　这一篇咱们来讲说vue-cli这样的一个脚手架，快速搭建一个vue项目，注意咱们的这个脚手架能够直接用npm下载，换句话的意思就是必需要有node环境，这里配置node的环境就很少说了。。。

 　　vue-cli版本是2.x，如今有3.x版本的，目录和2.x版本的有一些区别，有兴趣的能够去看看

 

1.搭建vue-cli项目

　　若是你的node安装好了并且环境变量配置好了，那么输入如下指令应该有相似这样的输出

 

　　而后咱们运行npm install -g vue-cli，全局安装一个vue-cli的模块，由于咱们要常用的，全局安装只用下载一次就好了，之后就能够直接用，那么vue-cli具体的是下载到什么地方去了呢？默认安装在C盘对应的用户下的AppData目录下，个人目录是C:\Users\admin\AppData\Roaming\npm\node_modules，下图所示，这个安装路径就用默认的就行，想要本身修改的话能够本身搜索方法

　　只要是npm install -g xxx 安装的全局模块都会在这里，我下载了几个经常使用的

 

　　而后咱们新建一个文件夹取名叫作  vue学习，用于存放咱们本身将要写的vue-cli项目，用cmd进入这个文件夹，执行vue init webpack vueprj01   ，最后的这个vueprj01是项目名，随便定义，不要有特殊字符和大写字母就行，而后除了一个地方其余地方所有回车就好，下图所示

　　注意，新手的话，在下图中的Use ESLint to lint your code 这里必定要选择no，否则这里就是在你编译项目的时候作语法检查，贼很差用，即便是一个空格也会给你报错的

 

　　一路回车以后，一个项目就成功了，而后就等着下载那些依赖模块就好了，反正下载的文件不少，几分钟吧！完成以后咱们用vscode打开这个vueprj01文件夹，技能看到下图所示的东西：

 

 　　而后咱们只须要在npm script那里，其实就是npm脚本，点击dev，整个项目就运行起来了；点击这个dev就好了（其实就是至关于在cmd中进入vueprj01中，执行npm run dev命令）

　　其实点击这里的dev和start是同样的效果，均可以，习惯点dev了，而后根据控制台提示访问http://localhost:8080，就能够看到效果了：

 

 

 　　到此为止一个简单的vue-cli项目就搭建出来了，很容易，下面咱们就来简单的使用一波

 

2.简单的使用vue-cli构建项目

　　在使用以前，咱们须要先了解一点基础知识：

　　路由：也就是咱们在建立项目的时候一直回车，有一个是install vue-router，这个就是路由，那么路由有什么用呢？举个不是很恰当的例子，就是路由器，当有我的都在用一个路由器的wifi的时候，为何每一个人都能访问不一样的网站呢？这里就是有路由器的做用，能够分配不一样的请求到不一样的网站；在咱们这里就是不一样的url访问vue项目，首先路由就会根据你的url去调用不一样的页面，而后渲染返回给你；

　　组件：在这里咱们已经看不到咱们上一篇的那种作法了，上一篇是在一个html中引入vue的依赖库，而后使用vue指令，new一个Vue实例；可是在vue-cli中咱们要学会组件化开发的思想，就是任意的一个文件就是一个组件，不管是一个vue文件，css文件仍是js文件等，都是一个组件，咱们在使用以前，必需要引入；

　　组件的基本格式：因为每个文件都是一个组件，因此格式也不同，后面咱们会慢慢说的，这里咱们只说以.vue为后缀的组件，这文件分三个部分，这里面有一个<template></template>，这里就是写html标签的，注意，每个template标签最外层必须有且只有一个div标签，而后你的各类html标签都要放在这个div标签中，以下所示；第二部分就是vue实例中的各类属性和钩子函数，导入第三方组件只能在第二部分导入；第三部分就是写css样式

<template>
//注意，最外层只能有一个div标签
  <div>
    <h1>我是h1标签</h1>
    <div>我是div标签</div>
    <table></table>
  </div>
</template>

<script>
//这里就跟new Vue(xxx)中的各类属性同样使用
  export default {
    name:'',
    props:[''],
    data () {
      return {
      };
    },
    components: {},
    computed: {},
    beforeMount() {},
    mounted() {},
    methods: {},
    watch: {}

  }

</script>

//这里就是写css代码，这里的scoped表示该样式只在当页面有效，避免污染其余页面样式
<style lang='' scoped>

</style>

 

　　引入组件的方式有两种：

　　　　一种是相似这种，import Vue from 'vue'，import App from './App' ；（注意：引号里面的不用加后缀，引号里面的./表示的是当前文件所在的这一层目录），可能有人会奇怪vue这里没有加./也行吗？由于vue这个模块是系统模块，也就是经过npm下载的模块（注意，不是全局下载），默认是放在项目中node_modules中，要引用这里的模块能够直接引入，不用加./；

　　　　第二种方式，因为vue-cli项目是须要node环境的，因而能够用node引入模块的方式，例如const prodEnv = require('./prod.env')，其实和第一种方式同样的，固然，推荐使用第一种

　　vue-cli项目只有一个html文件，咱们只是将这个html中的div标签内容和样式进行替换，这也叫作单页面开发

　　下面咱们来简单使用一下，第一步，在src目录下新建一个Header.vue文件，

<template>
  <div>
    <h1>这是个人第一个vue项目</h1> 

   <!--这里表示路由跳转，router-link标签会被渲染成一个a标签，to属性被渲染成href属性，这里的path也能够是name，那么必须和router中index.js中对应的路径的name一致 -->

    <router-link :to="{ path: '/hello' }">点击我</router-link>

  </div>
</template>

<script>
export default {};
</script>
<style lang='' scoped>
</style>

 　

　　第二步，在router目录下的index.js中，添加以下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入咱们本身定义的Header组件，能够不用加后缀，@默认表示目录src
import Header from '@/components/Header'

//这里表示Vue实例注册路由，换句话说有了这行代码咱们的vue项目才能有路由分发的效果
Vue.use(Router)

export default new Router({
    routes: [{
　　　　　　　　//这里随便修改一下，HelloWorld组件中随便改改，就不展现出来了
            path: '/hello',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {   //这里配置一个路径，当url访问xxx/head的时候，就会访问Header组件
            path: '/head',
            name: 'Header',
            component: Header
        }
    ]
})

 

　　第三步，修改APP.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 这里使用咱们引入的组件，只要是引入的组件均可以用标签的形式使用-->
    <Header/>
　　<!-- 这里就是根据路由匹配到的组件内容，就是router-lingk标签对应的内容，会在这里插入进来 -->
    <router-view/>
  </div>
</template>

<script>
//引入Header组件
import Header from '@/components/Header'
export default {
  name: 'App',
  //在当前组件注册子组件Header，而后再上面的html中才能使用<Header/>
  components:{
    //这里至关于"Header":Header,当要取的组件名字和组件同样，能够用这种简写形式
    Header
  }
}
</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>

　　

　　最后你只须要点击vscode中的dev按钮，在浏览器输入http://localhost:8080/head，就能看到效果了；

                   

 

　　而后点击那个连接"点击我"，路由就会起做用，就会访问Helloworld组件，并将它渲染到App.vue文件的那个<router-view/>标签这里

 

　　简单说说过程：

　　首先最外面是一个html，而后将APP.vue组件会经过某种方式编译成css，js等渲染这个html；

　　而这个APP.vue在项目编译的时候就会将导入的组件，如Header组件的内容给渲染进App.vue中<Header/>标签所在的位置，注意，此时还有一个<router-view/>标签能够看做是一个占位符，先抢到这个位置；

　　在Header组件中的router-link标签被渲染成一个a标签，因此咱们在首页能够很清楚的看到有个连接，当咱们点击这个连接的时候，就会根据路由，会匹配到HelloWorld组件，同时会把这个组件渲染到上一步说到的那个占位符的位置

 

3.总结

　　其实vue-cli简化了咱们须要作的操做，并且全程咱们感受不到路由，主要是有不少定义的文件须要咱们去好好看看，此次只是简单的测试了一下vue-cli，下一篇我准备简单的实现一下Vue动态绑定数据，总感受不懂其中的原理用Vue写东西老是云里雾里的，贼难受啊