Vue-cli搭建SPA项目

前言

今天分享的是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 name	项目名，默认是输入时的名称，直接回车
Project description	项目描述，直接回车
Author	作者，随便填 ==直接回车 ==
Vue build	选择题，一般选第一个（运行加编译，官方推荐）
Install vue-router	是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
Use ESLint to lint your code	是否用ESLint来限制你的代码错误和风格, N表示不使用
Set up unit tests	是否安装单元测试 N
Setup e2e tests with Nightwatch	是否安装e2e测试 N
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)	Yes, use NPM

注意：有多个选项的，按键盘的上下键进行选择即可！

图示：

看到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的下一个版本标准，2015.06发版

package.json简介

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块,以及项目的配置信息（名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块，也就是配置项目所需的运行和开发环境！

Vue项目结构介绍

1、build文件夹

这个文件夹主要是进行webpack的一些配置

build文件夹内容解释

相关文件	解释
webpack.base.conf.js	webpack基础配置,开发环境,生产环境都依赖
webpack.dev.conf.js	webpack开发环境配置
webpack.prod.conf.js	webpack生产环境配置
build.js	生产环境构建脚本
vue-loader.conf.js	此文件是处理.vue文件的配置文件

2、config文件夹

相关文件	解释
dev.env.js	配置开发环境
prod.env.js	配置生产环境
index.js	这个文件进行配置代理服务器，例如：端口号的修改

3、node_modules文件夹

存放npm install时根据package.json配置生成的npm安装包的文件夹

4、src文件夹 源码目录(开发中用得最多的文件夹)

相关文件	解释
assets	共用的样式、图片
components	业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
router	设置路由
App.vue	vue文件入口界面
main.js	对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

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的过程中注意命令执行的先后顺序，以及最好实时联网！