vue 安装和脚手架创建项目

1.安装nodejs,打开安装目录 D:\Program Files\nodejs (这是我安装目录，自行更改)， 在该目录打开cmd，运行如下命令检测是否安装成功。

npm -v

由于国内访问外网有问题，使用cnpm 替换 npm

有需要可以先配置下npm 全局安装目录

npm config set prefix=D:\Program Files\nodejs

设置完后安装cnpm，输入以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成系统并不能检测到 cnpm，需要配置cnpm 的系统环境变量到 path,把安装目录 D:\Program Files\nodejs\node_modules 添加进去，否则找不到相关文件。 

设置完成输入命令查看安装结果

cnpm -v

更新npm

cnpm install -g npm

安装 vue 和 vue的脚手架vue-cli(用于创建vue的项目框架)

cnpm install -g vue

cnpm install --g vue-cli

2.用vue脚手架创建项目

-- 在工程目录下，创建vue

vue init webpack "项目名称"

-- 进入项目所在的目录，运行命令

cd "项目所在文件夹“

-- 安装项目依赖包

cnpm install

项目结构

备注，这边public是我项目导出目录。 

（1） build // 项目构建(webpack)相关代码
　　build.js // 生产环境构建代码
　　check-versions.js // 检查node&npm等版本
　　dev-client.js // 热加载相关
　　dev-server.js // 构建本地服务器
　　utils.js // 构建配置公用工具
　　vue-loader.conf.js // vue加载器
　　webpack.base.conf.js // webpack基础环境配置
　　webpack.dev.conf.js // webpack开发环境配置
　　webpack.prod.conf.js // webpack生产环境配置
（2）config// 项目开发环境配置相关代码
　　dev.env.js // 开发环境变量
　　index.js //项目一些配置变量
　　prod.env.js // 生产环境变量
（3）node_modules// 项目依赖的模块
（4）src// 源码目录
　　assets// 资源目录  logo.png
　　components// vue公共组件   Hello.vue
　　router// 前端路由  index.js// 路由配置文件
　　App.vue// 页面入口文件（根组件）
　　main.js// 程序入口文件（入口js文件）
（5）static// 静态文件，比如一些图片，json数据等
　　.gitkeep
（6）剩余
　　.babelrc// ES6语法编译配置
　　.editorconfig// 定义代码格式
　　.gitignore// git上传需要忽略的文件格式
　　index.html// 入口页面
　　package.json// 项目基本信息
　　README.md// 项目说明