Vue入门学习日记（一）
一、环境搭建：
1. 安装Nodejs
官网下载后，输入node -v 查看node版本号
2. 安装淘宝镜像cnpm或者yarn
打开终端，设置淘宝 npm 镜像，输入：
npm config set registry https://registry.npm.taobao.org
或者：npm install -g cnpm --registry= https://registry.npm.taobao.org安装完后输入 cnpm -V 查看版本号
3. 全局安装 vue-cli
cnpm install -g vue-cli （在mac上出现错误时吗，加上sudo）
安装后输入 vue -V查看版本号
二、构建项目：
1.初始化项目
vue init webpack gshop
# vue init 是vue初始化项目
# webpack 是打包工具，其中也可以使用Browserify，感兴趣可以自行研究
# project 是自定义的项目名称cd gshop
npm install
npm run dev
执行命令时会显示下列选项：
$ vue init webpack project--------------------- 安装vue脚手架的命令，采用webpack打包工具，项目名是project
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 project
? Project name (project) ---------------------项目名称
? Project name project
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author wujy--------------------- 项目创建者
? Author wujy
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，推荐安装，是页面跳转用的
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no，因为这里有很多的坑，具体以后会讲
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) n ----------------是否安装单元测试，因人而异，可以自行选择
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n --------------------是否安装e2e测试，可自行选择
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "project".
To get started: --------------------- 这里说明如何启动这个服务
cd project --------------------进入项目文件夹
npm install ---------------------安装依赖，推荐使用淘宝镜像cnpm
npm run dev -----------------------项目运行2.运行项目
cd project ------进入工程目录
cnpm install -----安装包依赖
cnpm run dev ----运行项目（或者cnpm start）
打开chorme 输入 http://localhost:8080
3.打包，用于正式环境
cnpm run build
三、文件目录分析
build -------------------项目构建相关代码（webpack配置）
build.js -------------生产环境构建代码
check-versions.js ----------检查node、npm等版本
utils.js ------------------------构建工具相关
vue-loader.conf.js ---------css加载器的配置
webpack.base.conf.js ---webpack的基础配置信息
webpack.dev.conf.js -----webpack开发环境配置信息，构建开发本地服务器
webpack.prod.conf.js ---wenpack生产环境配置信息
config -------------------配置目录，包括端口号，打包输出等的vue基本配置文件
dev.env.js -----------开发环境变量
prod.env.js -----------生产环境变量
index.js -------------项目的配置变量，端口号等
node_modules -----------加载的项目依赖模块
static -------------------静态资源目录
index.html ---------------首页的入口文件，可以添加meta等参数
README.md ---------------项目的说明文档，makedown格式
src -----------------------源码目录，主要的开发
assets ---------------静态资源，css,image等可以存放
components -----------公共组件
router ---------------路由文件夹，配置页面跳转
views ----------------页面编写的地方，（可以自行定义命名）
main.js ------------------入口文件，全局的配置和加载
.babelrc -----------------ES6语法编译配置，用来将es6代码转换成浏览器可识别的es5代码
.gitignore ---------------git上传需要忽略的文件的格式
package.json -------------项目的基本信息，包括开发所需要的模块、项目名称、版本号等
.postcssrc.js ------------转换css的工具
.editorconfig ------------定义代码格式
备注：
强制清除 npm包缓存 npm cache clean --force
需要package.json才能npm install
