Vue 搭建脚手架CLI

1. 安装node.js node -v 查看 node的版本 npm -v 查看npm的版本 保证node 6.9 npm 3.10 版本以上。

2. 安装webpack为全局包：安装nmp后， 在cmd 中执行 npm install webpack -g

3. 安装CLI

# 全局安装 vue-cli
$ npm install --global vue-cli
全局安装完查看 vue -V 或 vue --version 版本
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
  my-project 为自己项目的名称
# 安装依赖，走你
$ cd my-project
$ npm install 安装依赖
$ npm run dev　运行项目

创建项目流程：

cd 目录(你要把项目放在哪个目录)：

vue init webpack pname(你的项目名字)； 
　　? Project description (A Vue.js project) vue-cli新建项目(项目描述)； 
　　? Author (xhdx <zhuming3834@sina.com>) ；zhuming3834@sina.com(项目作者)； 
　　? Vue build ❯ Runtime + Compiler: recommended for most users Runtime-only: about 6KB ......
　　    这里选择Runtime + Compiler: recommended for most users；(运行时编译器) 按enter 键即可
　　? Install vue-router? (Y/n) y 是否使用vue-router(路由，也可暂时 n )，这里根据需求选择； 
　　? Use ESLint to lint your code? (Y/n) y ESLink 是对代码规范性检查，不符合规范就会报错； 
　　? Pick an ESLint preset (Use arrow keys) 
　　    这里选择Standard (https://github.com/feross/standard) 
　　? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择； 
　　? Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
      ? Should we run `npm install` for you after the project has been created? (recommended) npm
      我们应该运行npm安装的项目创建后给你吗?
    
       cd pname(项目目录)； npm install 安装依赖； npm run dev 本地运行项目

4.  安装成功后，项目就创建成功。按照 步骤3 继续执行。

5. 文件介绍

build  构建服务端和客户端，可改端口号
config 配置
static 静态文件
inde.html 入口文件
package.json  依赖的东西

6. src 文件介绍

assets 存放图片
components 组件
app.vue 根组件
main.js  index.html 入口引用的js

7. .vue文件的模式

 index.html -> main.js -> app.vue

index 入口文件去执行main.js ，然后main.js去实例化 app.vue组件.

<!--1模板：html结构 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<!--2行为：处理逻辑 -->
<script>
// 引用组件 组件关联 1.先import 2. components 注册
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    // 注册
    HelloWorld
  }
}
</script>
<!--3样式：解决样式-->
<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>

每个 vue文件的格式都是这个格式。

8. sublime中对.vue文件格式化

tools -> HTML/CSS/JS Prettify ->  set node path 里面的在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue。