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

原著是一个有趣的人,若有侵权,请通知删除