手把手教你新建一个Vue项目
下载安装 node.js
node 官网下载地址
控制台输入 node-v 检查自己系统有没有下载过 node
使用 npm 包管理工具，推荐去国内最常用的库：https://cnpmjs.org
国内用户在终端执行以下代码替换淘宝镜像进行下载，换成了淘宝了镜像，在国内网速很快。
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/mirrors/node \
--userconfig=$HOME/.cnpmrc"
alias（别名）的一串命令将 npm 重命名为 cnpm
安装 vue-cli(vue-cli 是 vue 官方提供的脚手架工具)
用 vue-cli 初始化项目的优势：
- 成熟的 vue 项目架构设计
- 本地测试服务器
- 集成 webpack 打包上线方案
安装系统要求：
- Node.js(>=4.x)
- Git
- 一个能使用 node 的命令行终端
全局安装 Vue-cli
npm install vue-cli -g
创建项目
在自己项目文件夹下打开控制台
安装 webpack 模板，并设置工程信息
vue init webpack my-project [my-project 为项目名称]
控制台需要设置如下问题
- Project name：项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车
- Install vue-router:是否需要 vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件
- Use ESLint to lint your code:是否使用 ES 检测器，默认使用，这样会生成相关的 ESLint 配置
- Setup unit tests with Karma + Moch?: 是否安装单元测试。一般选 no，根据自己项目情况选择”Y”或”N”
- Setup e2e tests with Nightwatch：是否安装 e2e 测试。一般也选 no，根据自己项目情况选择”Y”或”N”
以上配置如选择 yes 则生成的项目会自动有相关的配置，有一些 loader 我们就要配套下载。
如果我们确定不用的话最好不要 yes，防止下很多没有用的 loader。
部署 Vue 项目完成之后的目录
-
首页入口 index.html
-
build 配置文件夹
-
webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js 三个 webpack 的配置文件，分别是基本 webpack 配置、开发环境配置、生产环境配置。
-
config 配置文件夹
其中最主要的 index.js 用于配置代理服务器，和后台联调时在 proxyTable 这个属性设置一个后台地址即可。
-
src 文件夹（主要以及使用频率最高的文件夹、大部分开发在 src 目录下、存储主要源码）
-
assets: 共用的样式、图片
-
components: 业务代码存放位置、里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
-
router: 设置路由
-
App.vue: vue 文件入口界面，App.vue 是可以热更新的。
-
main.js：入口文件、对应 App.vue 创建 vue 实例，对应 webpack.base.config.js 里的入口配置
-
static 文件夹（保存静态文件）
存放的文件不会经过 webpack 处理，可直接引用
如 swf 文件要引用可在 webpack 配置带 swf 后缀名的文件处理的 loader，也可直接将 swf 文件放在这个文件夹引用 -
package.json（npm 所需要的一套配置文件）
这个文件有两部分是有用的：- scripts 里面设置命令，
如设置了 dev 用于调试则我们开发时输入：npm run dev - 如设置了 build 输入
npm run build 用于打包会生成部署一套上线目录文件（完成之后多了 dist 目录）
我们需要的依赖包,在 dependencies 和 devDependencies 中，分别对应全局下载和局部下载的依赖包
- scripts 里面设置命令，
安装依赖
- 进入项目文件夹：cd my-project
- 打开 package.json 文件，找到 devDependencies 和 dependencies，删掉里面我们不需要的依赖包
- 根据自己项目需要通过命令 sudo npm install /npm install（安装项目依赖）、下载其他依赖包如 npm install vue-resource 等，一个个下载
要在有 packge.json 文件的目录下、推荐使用 yarn，速度更快、相关依赖安装之后目录会多一个 node_modules
跑项目 npm run dev
-
下载好依赖后先输入 npm install
-
如有缺漏再根据提示去下载。
-
输入命令 sudo npm run dev / npm run dev(在本地启动测试服务器)
ESLint: 帮助检查 Javascript 编程时的语法错误，保证多人开发一个项目保持语法一致。
Webpack: 设置代理、插件和 loader 处理各种文件和相关功能、打包等功能。整个项目中核心配置
iview: 基于 vue 的一套样式框架，里面有很多封装好的组件样式
ES6 语法：利用 babel 处理。
vue --help vue 的命令行查看帮助
vue -v 看版本
步骤总结：
- npm install --global vue-cli 下载 vue-cli 脚手架
- vue init webpack myProject 生成项目，形成基本结构
- npm install 下载依赖包
- npm run dev 运行
项目实例
build/webpack.base.config.js
进行 loader 的配置，以及有一个 iview 的 css 文件不进行 babel 的处理，如下
src/router/index.js:
import 引入组件文件，根据 vue-router 写上相应的路由配置
src/components:
业务代码集中地，我做了一个简单的，只有三个组件。然后在每个组件中又分成几个组件构成。
