需要的东西：
- node.js环境（npm包管理器）
- vue-cli 脚手架构建工具
- cnpm npm的淘宝镜像v
安装node
检查是否安装成功; 输入： node -v 如图：
npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。
OK！node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。
安装cnpm
在命令行中输入 npm install -g cnpm --registry=registry.npm.taobao.org 然后等待，安装完成如下图。
如果安装失败：找到user/admin/.npmrc文件删除后，重新执行：$ npm --registry=registry.npm.taobao.org install cnpm -g 一下子就安装成功了~
完成之后，我们就可以用cnpm代替npm来安装依赖包了。
安装vue-cli脚手架构建工具
在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。
转到项目目录或新建个项目
mkdir sjd 新建个项目目录为sjd 在e盘 vue -V 查看vue的版本
在命令行中运行命令 vue init webpack sjd 初始化这个项目 其中webpack是构建工具
输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。
- Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
- Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
- Author：作者，如果你有配置git的作者，他会读取。
- Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
打开sjd文件夹，项目文件如下所示
src 资源文件，所有的组件以及所用的图片都是在这个放着的简单看一下这个文件夹下都放了那些东西
assets 资源文件夹，放图片之类的资源，components 组件文件夹，写的所有组件都放在这个文件夹下，现在有一个写好的组件已经放到里面了，router 路由文件夹，这个决定了也面的跳转规则，App.vue应用组件，所有自己写的组件，都是在这个组件之上运行了，main.js webpack入口文件，webpack四大特性entry入口、output输出，loader加载器，plugins插件，可以再项目中build\webpack.base.conf.js第12行看到这个入口文件是哪个。
这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。
命令行出现上面的文字，说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。
1、cd sjd 进入我们的vue项目目录。
2、npm install 安装我们的项目依赖包，也就是安装package.json里的包，如果你网速不好，你也可以使用cnpm来安装。
安装完成之后，会在我们的项目目录文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。
3、npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。
这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。
出现这个页面，说明我们的初始化已经成功，现在可以快乐的玩耍了。
vue-cli脚手架工具就是为我们搭建了开发所需要的环境，为我们省去了很多精力。有必要对这个环境进行熟悉，我们就从项目的结构讲起。
package.json
package.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。
package.json 里的scripts字段，这个字段定义了你可以用npm运行的命令。在开发环境下，在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js .也就是开启了一个node写的开发行建议服务器。由此可以看出script字段是用来指定npm相关命令的缩写。
dependencies字段和devDependencies字段
- dependencies字段指项目运行时所依赖的模块；
- devDependencies字段指定了项目开发时所依赖的模块；
在命令行中运行npm install命令，会自动安装dependencies和devDempendencies字段中的模块。package.json还有很多相关配置
webpack配置相关
dev-server.js 这个文件相当重要
webpack.base.confg.js webpack的基础配置文件
.babelrc
Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码。如果你想了解更多，可以查看babel的知识。
.editorconfig
一、npm run build 命令
输入npm run build命令后，vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中可以看出，你执行的npm run build命令就相对执行的 node build/build.js 。
package.json的scripts 字段：
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
},
在执行完npm run build命令后，在你的项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。
dist文件夹下目录包括：
- index.html 主页文件:因为我们开发的是单页web应用，所以说一般只有一个html文件。
- static 静态资源文件夹：里边js、CSS和一些图片。
二、main.js文件解读
main.js是整个项目的入口文件,在src文件夹下：
通过代码可以看出这里引进了App的组件和的模板，它是通过 import App from ‘./App’这句代码引入的。 我们找到App.vue文件，打开查看。
三、App.vue文件:
app.vue文件我们可以分成三部分解读，
- 标签包裹的内容：这是模板的HTMLDom结构，里边引入了一张图片和标签，标签说明使用了路由机制。我们会在以后专门拿出一篇文章讲Vue-router。
- 标签包括的js内容：你可以在这里些一些页面的动态效果和Vue的逻辑代码。
- 标签包裹的css内容：这里就是你平时写的CSS样式，对页面样子进行装饰用的，需要特别说明的是你可以用来声明这些css样式只在本模板中起作用。
四、router/index.js 路由文件
我们可以看到 import Hello from ‘@/components/Hello’这句话， 文件引入了/components/Hello.vue文件。这个文件里就配置了一个路由，就是当我们访问网站时给我们显示Hello.vue的内容。
打包前把 path:'/' -.> path: './'
在这明明可以靠脸吃饭的年代，却不要脸的去卖弄自己的才华。。。
\
