Vue-cli搭建SPA项目
前言vue-cli简介安装vue-cli使用脚手架vue-cli(2.X版)来构建项目如何去更改调试地址的端口号使用vue+elementUI创建SPA项目Vue项目结构介绍*.vue文件简介组件嵌套 总结前言
今天分享的是Vue-cli搭建SPA项目，前提是已经搭建好Node.js环境！
如若有不懂的小伙伴，可以看看这篇博客：
Node.js环境搭建
vue-cli简介
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板 !
安装vue-cli
npm install -g vue-cli
此操作需要全程实时联网！
安装完成之后输入vue -V命令测试是否安装成功！
此时可以看到已经出现了对应的版本号，说明安装成功!
注意：用来测试安装是否成功的命令中的V是大写的V
并且安装成功之后node-global文件夹中会生成以下文件：
使用脚手架vue-cli(2.X版)来构建项目
步骤一：使用脚手架创建项目骨架
此操作类似于使用eclipse创建一个maven的web项目
1、首先Windows+R输入cmd,打开cmd窗口
2、切换盘符
F:
3、 进入指定路径 此路径是用来存放创建的SPA项目的路径！
cd F:\Y1\soft\temp\project
4、执行命令，等待下载（注意需要有网络）
vue init webpack xxx
xxx表示创建的SPA项目名，注意项目名不能有大写字母！
5、然后会出现"一问一答"模式（可能会出现乱码，但是并不影响项目的创建!）
注意：有多个选项的，按键盘的上下键进行选择即可！
图示：
看到Project initialization finished!说明项目创建成功！
步骤二：运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块
这类似于maven的web项目创建成功后，修改pom文件添加依赖!
1、改变路径到spa1文件夹下
cd spa1
2、安装所有项目需要的npm模块
npm install
步骤三：启动并访问项目
这类似于启动tomcat，并通过浏览器访问项目！
执行npm run dev命令进行启动项目！
项目启动成功后，打开浏览器输入http://localhost:8080网址即可访问项目！
vue-cli构建的项目，在控制台npm run dev启动后，默认的调试地址是8080端口！
但是很多时候我们都要并行几个项目开发，很有可能已经占用了8080端口，所以就涉及到如何去更改调试地址的端口号
如何去更改调试地址的端口号
首先打开你创建SPA项目的路径，找到config文件夹：
其次找到config文件夹下的index.js文件
选中项目-----打开方式-----记事本----修改port为8083-----保存
修改端口号之后记得重新启动项目！
再次访问后的页面：
步骤四：停止项目添加element-ui模块
npm install element-ui -S
-S就是-save的缩写
使用vue+elementUI创建SPA项目
一般情况下其项目结构组成如下：
Vue + ESLint + webpack + elementUI + ES6
Vue: 主要框架
ESLint: 帮助我们检查Javascript编程时的语法错误，这样在一个项目中多人开发，能达到一致的语法
Webpack: 设置代理、插件和loader处理各种文件和相关功能、打包等功能。整个项目中核心配置
elementUI: 是基于vue的一套样式框架，里面有很多封装好的组件样式
ES6: 全称ECMAScript6.0，是JavaScript的下一个版本标准，.06发版
package.json简介
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块,以及项目的配置信息（名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块，也就是配置项目所需的运行和开发环境！
Vue项目结构介绍
1、build文件夹
这个文件夹主要是进行webpack的一些配置
build文件夹内容解释
2、config文件夹
3、node_modules文件夹
存放npm install时根据package.json配置生成的npm安装包的文件夹
4、src文件夹 源码目录(开发中用得最多的文件夹)
5、 static文件夹
存放的文件不会经过webpack处理，可以直接引用！
6、 package.json
这个文件有两部分是有用的：scripts 里面设置命令以及在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包！
*.vue文件简介
*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 template, script 和 style。这三个部分分别代表了 html,js,css。组件嵌套
打开HBuilder----打开目录----找到你创建的SPA项目-----选择文件夹
案例演示：首页-用户中心-用户
实现思路
1、src目录下新建对应的vue文件
2、vue文件中的内容和嵌套的关系保持一致
3、Vue文件的name属性要和index中的path、name一致！
注意vue文件命名最好遵循帕斯卡命名法，即首字母大写！
Home.vue
<template><div><h1>首页</h1><div><router-link to="/About">关于我们</router-link><router-link to="/UserCenter">用户中心</router-link></div><div><router-view/></div></div></template><script>export default{name:'Home',data:function(){return{}},methods:{}}</script><style></style>
About.vue:
<template><div><h1>关于我们</h1><div><router-view/></div></div></template><script>export default{name:'About',data:function(){return{}},methods:{}}</script><style></style>
UserCenter.vue:
<template><div><h1>用户中心</h1><div><router-link to="/Register">用户注册</router-link><router-link to="/UpdatePwd">修改密码</router-link></div><div><router-view/></div></div></template><script>export default{name:'UserCenter',data:function(){return{}},methods:{}}</script><style></style>
Register.vue
<template><div><h1>用户注册</h1><div><router-view/></div></div></template><script>export default{name:'About',data:function(){return{}},methods:{}}</script><style></style>
UpdatePwd.vue
<template><div><h1>修改密码</h1><div><router-view/></div></div></template><script>export default{name:'About',data:function(){return{}},methods:{}}</script><style></style>
index.js
1、该文件需从头部引入你使用的组件
2、下面的routes路由器的线路中增加对应的模块内容
3、只能有一个根路径，即“/”,其余为子路径！
4、@/表示src的根目录
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Home from '@/views/Home'import About from '@/views/About'import UserCenter from '@/views/UserCenter'import Register from '@/views/Register'import UpdatePwd from '@/views/UpdatePwd'Vue.use(Router)export default new Router({routes: [{path: '/HelloWorld',name: 'HelloWorld',component: HelloWorld},/*此时Home为根路径*/{path: '/',name: 'Home',component:Home},{path: '/About',name: 'About',component:About},{path: '/UserCenter',name: 'UserCenter',component:UserCenter},{path: '/Register',name: 'Register',component:Register},{path: '/UpdatePwd',name: 'Updatepwd',component:UpdatePwd}] })
效果
点击首页的关于我们：
点击首页的用户中心：
当点击用户中心的用户注册
当点击用户中心的修改密码
总结
安装vue-cli的过程中注意命令执行的先后顺序，以及最好实时联网！
