如何使用Vue-cli快速构建单页应用

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：vue-cli github

vue-cli 模板使用:

• 首先下载Git工具和node.js,有嫌慢的同学也可以去我的网盘下载node.js和GIt,下载完成后一路回车安装即可
• 首先新建一个文件夹(名字最好是纯英文).然后在文件夹里右键打开Git Bash Here(Git 安装成功就会出现,是一个黑色的框框,后续的命令都会在这里面完成)
• 建议使用淘宝镜像cnpm ,在黑框框里输入npm install cnpm -g安装后网速要快好多的
• 然后使用cnpm安装vue cnpm install -g vue-cli 安装vue-cli
• 通过输入 vue --version 查看vue版本
• 在通过vue list命令可 查看ue-cli 得6种模板:

  browserify - A full-featured Browserify +            vueify setup with hot-reload, linting & unit            testing.
  browserify-simple - A simple Browserify +            vueify setup for quick prototyping.
  pwa - PWA template for vue-cli based on t           he webpack template
  simple - The simplest possible Vue setup            in a single HTML file
  webpack - A full-featured Webpack + vue-l           oader setup with hot reload, linting, testing            & css extraction.
  webpack-simple - A simple Webpack + vue-l           oader setup for quick prototyping.

• $ vue init <template-name>（模板名 如：webpack-simple） <project-name>（项目名字 如：vue-cli-01）

  vue init webpack-simple vue-cli-01

然后 一直回车 有作者信息和sass 描述等,N后继续回车

• cd vue-cli-01 进入到你的文件中
• cnpm install 下载所需要的依赖 （依赖最后有对勾就是对了 不对的话重新删除在下载一次）
• cnpm run dev 开启虚拟服务器
  肯错+c 关闭服务器

webpack-simple路由使用:

• 安装路由 cnpm install vue-router -g
• 或安装生产情况下的vue-router cnpm install vue-router -S

• 在src里新建 router.config.js 文件,把配置路由写到 router.config.js 文件里

import Home from "./conpaoles/home.vue"
import User from "./conpaoles/user.vue"
//import 引入 自定名字 路径是‘href’
export default{
    // 暴露文件
    //出口文件
    routes:[
    {path:'/home',component:Home},
    {path:'/user',component:User}
]
}

• 在src里新建文件 component ,把项目的组件的写到src新建的 component 文件里.这是一个专门写组件的文件
  比如我们写了两个组件:那就在component里新建两个文件About.vue和Home.vue,注意后缀是.vue
  Home.vue文件内容是:

<template>
    <h1>这是Home</h1>
</template>
<style></style>
<script></script>

About.vue文件内容是:

<template>
    <h1>这是About</h1>
</template>
<style></style>
<script></script>

style 和script 如不需要可不写

• 在src里的App.vue 是一个模块的文件 ,最终会在html 中显示
• App.vue中这样更改

<template>
<div id="app">
   <h1>{{ msg }}</h1>
    <br>
    <router-link to='/home'>home</router-link>
    <router-link to='/user'>user</router-link>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

• 最后都把这些东西都引入main.js

import Vue from 'vue'
import vueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
//import:引入.自定义名字 from 来自 （路径）‘href’ 
Vue.use(vueRouter);
//暴露 vueRouter
// vue use(使用) （使用的名字）
const myRouter=new vueRouter(routerConfig)
//定义一个常量 
new Vue({
  el: '#app',
  render: h => h(App),
  router:myRouter
    //挂载到vue实例里
})

再次在文件中打开git bash here输入cnpm run dev开启虚拟服务器,会自动弹出浏览器界面.
Element UI 组件库 饿了么团队 提供的组件库
官网：element.eleme.io