安装vue-cli
打开 cmd 命令行工具，输入npm install -g vue-cli,回车 全局安装vue-cli
(注：npm 会有点慢，建议更改为国内淘宝的镜像，只换源即可。在cmd输入命令：
npm config set registry https://registry.npm.taobao.org
构建vue-cli项目
创建项目
通常创建vue-cli项目都是使用的webpack模版，在这里我们也使用webpack模版来创建项目。使用其他模版的请参考 这里。
打开cmd，进入想要创建项目的目录下，输入：
vue init webpack projectname
webpack 默认是安装2.0版本，若要安装1.0版本，需在 webpack 后面加上版本号信息，
vue init webpack project-name
projextname是自定义的项目名称，例：我这里命名为vuedemo
命令输入完成后敲回车，此时会自动下载 webpack模板，稍微等待一会，会让你按提示完成项目的创建，如下图
按提示创建项目
Project name // 项目名称
Project description // 项目描述
Author // 作者
Vue build // 构建模式，一般默认选择第一种
Install vue-router? // 是否安装引入 vue-router，这里选是，vue-router 是路由组件,后面构建项目会用到
Use ESLint to lint your code? // 建议使用，开发可能会慢一些，但是容易排错
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch 这两个是测试，可以不用安装
安装依赖
项目创建完成，打开文件夹可以看到目录结构。
此时，项目已经初具雏形，但还未安装依赖，需打开 cmd，进入项目所在根目录下，输入npm install,回车。
我们此时再打开项目文件夹，可以看到多了node_modules文件夹，里面是各种需要的依赖包。
运行项目
打开 cmd，进入到项目所在目录下，输入npm run dev,回车，启动项目
完成后，浏览器会自动打开，监听端口8080.
项目结构
总体结构
一个vue-cli的项目结构如下：
项目结构
build
build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查 node及npm版本，加载配置文件，启动服务。
build文件夹
config
config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等
config文件夹
node_modules
node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开 cmd，进入项目目录，输入npm install [依赖包名称],回车。
在两种情况下我们会自己去安装依赖：
-
项目运行缺少该依赖包：例如项目加载外部css会用到的
css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader） -
安装插件：如
vux（基于WEUI的移动端组件库），vue-swiper（轮播插件）
注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装 11.1.4 版本的
vue-loader，输入npm install vue-loader@11.1.4
src
项目核心文件前面已经进行了简单的说明，接下来重点讲解main.js，App.vue,及router的index.js
index.html
index.html如其他 html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过 vue 组件来填充
index.html
App.vue
一个 vue 页面通常由三部分组成:模板(template)、js(script)、样式(style)
vue页面
【template】
其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如下图，父节点为#app的div，其没有兄弟节点）
<router-view></router-view>是子路由视图，后面的路由页面都显示在此处.
打一个比方吧,<router-view>类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示.
【script】
vue 通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看 vue.js 文档。
【style】
样式通过标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>
如要引入外部 css 文件，首先需给项目安装css-loader依赖包，打开 cmd，进入项目目录，输入npm install css-loader,回车。安装完成后，就可以在 style 标签下import所需的 css 文件，例如：
<style>
import './assets/css/public.css'
</style>
这样，我们就可以把 style 下的样式封装起来，写到 css 文件夹，再引入到页面使用，整个 vue 页面也看上去更简洁。
main.js
main.js主要是引入 vue 框架，根组件及路由设置，并且定义 vue 实例，下图中的
components:{App}就是引入的根组件App.vue
后期还可以引入插件，当然首先得安装插件。
main.js
router
router文件夹下，有一个index.js，即为路由配置文件
router
这里定义了路径为/的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件
类似的，我们可以设置多个路由，/index,/list之类的，当然首先得引入该组件，再为该组件设置路由。
网友评论