vue-cli创建新项目

1，检查node -v ，npm -v 是否已经安装
2，全局安装vue-cli
npm install vue-cli -g
3，初始化基于webpack的新项目
vue init webpack my-project
4，项目创建完成后，安装基础模块
cd myproject
npm install
（模块安装时间可能会很长，依赖于网速）
5，开发模式下运行项目预览效果
npm run dev
6，可以继续安装Vue的辅助工具
npm install vue-router --save
npm install vuex --save
npm install vue-resource --save
文件介绍：

yuxuan.png

1.build （webpack配置，主要启动dev-server.js,当输入npm run dev首先启动的是dev-server.js,检查node和npm版本，加载配置文件，启动服务）

build.png

build.js生产环境构建
check-versions.js 版本检查
dev-client.js开发服务器的热重载，用于实现页面的自动刷新
dev-server.js构建本地服务器
util.js构建相关工具
vue-loader.conf.js css加载器配置
webpack基础配置，开发环境配置，生产环境配置

2.config（Vue项目配置）
dev.env.js项目开发环境配置
index.js项目主要配置（接口和打包路径）
prod.env.js项目生产环境配置

config.png

3.node_modules（依赖包）
基础依赖和自己根据需要安装其他依赖，npm install [依赖包名称]@11.1.4
1>项目运行缺少该依赖包
项目加载外部css会用到css-loader，路由跳转用到vue-router
2>安装插件 vue-swiper

4.src (项目核心文件)
assets静态资源（css，以及外部js文件）
components公共组件
router 路由
App.js根组件
main.js入口文件

src.png

5.1index.html （主页）
一般只定义一个空的根节点，在main.js里定义的实例将挂载在根节点上，内容通过vue组件填充

index.html main.js

5.2 App.vue根组件
一个vue页面一般包含三部分（template，js，style）
template:只能包含一个父节点，顶层div只能一个
<router-view></router-view>是子路由视图，后面的路由页面都显示在此处
script：用export default导出，可以包含data,生命周期，方法等，
style:默认影响全局，要引入外部CSS，首先给项目安装css-loader依赖包，在style标签下引入import

App.vue

5.3 main.js
主要是引入vue框架，根组件，路由设置，并且定义vue实例，后期还可以引入插件，首先要安装依赖包

main.js

5.4router--index.js路由配置
路径“/”，Hello组件

index.js