Vue-cli搭建SPA项目
前言
今天分享的是Vue-cli搭建SPA项目,前提是已经搭建好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的过程中注意命令执行的先后顺序,以及最好实时联网!