vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)
前言
本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader、style-loader、vue-loader、url-loader、sass-loader等,熟悉webpack的配置、文件的打包,以及路由的配置及使用。
作为自己对Vwebpack+Vue项目搭建知识的总结与笔记。
因内容有案例解读,代码实现,导致篇幅稍长,大约3分钟可以浏览完,如有需要的话(请笔友耐心看完,也可按目录查找所需内容)
百度网盘链接,案例源码获取地址:
链接://pan.baidu.com/s/1JCKEn8gQl6sbSz7JERoKFQ?pwd=1234
提取码:1234
随笔目录结构:
PS: 点击上述标题后 –> 这个标志可以浏览目录结构,以便快速定位需要的内容
用户登录注册案例动图展示:
案例视图展示:
登录页面
注册页面
一、搭建项目开发环境(建议使用Node 8.12.0 版本)
1。开发工具
最主要的是Node 8.12.0 版本,版本冲突最少,当然最好是8.12.0 版本,其他版本也可以,不过需要调试错误。
这里随笔基于Node 8.12.0 版本,可以无冲突安装,一路Next到最后运行。
1.1 VScode 任意版本即可
1.2 Node多版本管理工具gnvm (也可不装)
此工具是管理Node版本的,方便开发,谁用谁爽,前端工程师都知道它
建议安装,因为项目搭建需要更改node版本,以便与解决node和npm、webpack等工具的版本冲突,具体的安装步骤请参考如下博文:
Node多版本管理工具gnvm的安装://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html
1.3 Node 8.12.0 版本(未使用gnvm版本管理工具的,如有其他版本可能需要卸载掉,再安装8.12.0版本)
(1)如果参考上一步骤下载了gnvm,并且安装了Node 8.12.0 版本,可跳到下一步骤
Node多版本管理工具gnvm的安装://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html
(2)如果未安装Node多版本管理工具gnvm,可以直接从以下地址获取(推荐安装gnvm):
百度网盘链接,案例源码获取地址:
链接://pan.baidu.com/s/1JCKEn8gQl6sbSz7JERoKFQ?pwd=1234
提取码:1234
2。案例分析
1.1案例的目录结构如下图所示。
二、快速搭建项目(在我给的login项目框架进行测试)
1。准备工作
1.1 先获取login项目文件夹(地址如下)
百度网盘链接,案例源码获取地址:
链接://pan.baidu.com/s/1JCKEn8gQl6sbSz7JERoKFQ?pwd=1234
提取码:1234
1.2 将login项目文件放在一个新建文件夹里(例如:D:\allcode\classcode\vuecode\testcode\test1\test506)
1.3 浏览login文件夹目录
1.4 使用VScode编译工具打开login文件所在目录(如下图)
2。执行命令,开启配置运行环境
注:以下配置,不出意外的话,较为舒适,一路绿灯,直接到项目运行成功,有着极大的自豪感(敬请期待!)
1.1 打开新建终端(这里我的终端改成 gitbash 格式了 但方法环境相同 不影响)
查看node 版本是否正确
输入命令
node -v
1.2 切换到login目录下
输入命令 (注意查看自己的login文件夹目录)
cd test506
cd login
1.3 初始化项目
输入命令
npm init -y
1.4 安装vue和vue-router
输入命令
npm install [email protected] [email protected]
1.5 安装webpack
输入命令
npm install [email protected] [email protected] [email protected] [email protected] -D
1.6 安装vue-loader和vue-template-compiler
输入命令
npm install [email protected] [email protected] -D
1.7 安装css-loader和style-loader
输入命令
npm install [email protected] [email protected] -D
1.8 安装Less
输入命令
npm install less less-loader -D
1.9 安装Sass/SCSS
输入命令
npm install [email protected] [email protected] -D
1.10 安装Stylus
输入命令
npm install stylus stylus-loader -D
1.11 安装file-loader和url-loader 做图片和字体文件处理
输入命令
npm install [email protected] [email protected] -D
1.12 运行项目
输入命令
npm run dev
1.13 浏览器输入访问地址
输入命令
//localhost:8088
登录页面
注册页面
至此,先恭喜你了!项目运行成功,如详细源码分析和步骤详解,请继续往下看
三、login项目源码分析和步骤详解(建议参考login文件夹进行分析)
1。案例分析
提前学习:Vue框架中路由地址://www.cnblogs.com/zbcxy506/p/note_1vue-06.html
学习了vue-router的基础知识后,接着学习如何将vue-router应用到项目开发中。
通过此次的学习,笔友将会掌握如何自己动手搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader、style-loader、vue-loader、url-loader、sass-loader等,熟悉webpack的配置、文件的打包,以及路由的配置及使用。
1.1 功能需求分析
登录和注册是项目开发中经常遇到的功能需求,在网页中需要用户登录后才可以使用某些功能,如中国移动APP,在用户登录成功后才可以查看流量和话费余额等信息。
1.2 页面效果展示
登录页面
注册页面
1.3 目录结构
2。准备工作
1.1 初始化项目
创建D:\vuecode\testcode\login目录,在命令行中切换到该目录,执行以下命令。
npm init –y // 选项“-y”表示全部使用默认
执行完上述代码,会在login目录下自动生成一个package.json工程文件(项目依赖、名称、配置),会记录需要的依赖包。另外,读者也可以省略选项“-y”,此时程序会提示输入项目的一些基本信息。
1.2 安装vue和vue-router
在login目录下执行如下命令,安装vue和vue-router。
npm install [email protected] [email protected]
安装完成之后,会在当前目录下自动生成一个package-lock.json文件。
1.3 安装webpack
项目中需要打包文件,所以需要用到webpack打包工具,实现自动打包编译功能。为了更方便地使用webpack,还需要安装webpack-cli工具、webpack-dev-server服务器和html-webpack-plugin插件。具体安装命令如下:
npm install [email protected] [email protected] [email protected] [email protected] -D
上述命令中,-D表示安装到本地开发依赖,也可以使用–save-dev来代替。
1.4 修改package.json文件
在scripts中添加dev,使用webpack-dev-server来启动项目,具体代码如下。
"scripts": {
……(原有代码)
"dev": "webpack-dev-server --inline --hot --port 8088"
},
添加上述代码后,当需要运行项目时,可以执行npmrun dev命令。
1.5 编写webpack.config.js文件
创建webpack.config.js文件,在文件中配置webpack的选项,设置入口文件、出口文件以及一些规则配置,具体代码如下。
consthtmlWebpackPlugin= require('html-webpack-plugin')
module.exports= {
entry: './main.js', // 配置入口文件
output: { // 配置输出文件
path: __dirname, // 输出文件的路径,此处设为当前路径
filename: 'bundle.js',// 指定输出的文件名称
},
resolve: {}, // 其他的配置选项
module: { rules: [] } , // 模块规则
plugins: []// 插件
}
1.6 安装vue-loader和vue-template-compiler
vue-loader作用是解析和转换vue文件,提取出其中的script、style、HTML、template,然后分别把它们交给各自相对应的loader去处理。vue-template-compiler的作用是把vue-loader提取出的HTML模板编译成对应的可执行的JavaScript代码。
具体命令如下。
npm install [email protected] [email protected] -D
安装后,将vue-loader插件添加到webpack.config.js文件中,示例代码如下。
constVueLoaderPlugin= require('vue-loader/lib/plugin')
module.exports= {
……
plugins: [
……
new VueLoaderPlugin()
]
然后在module.exports中找到module,在rules数组中配置loader加载依赖。
输入命令
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// 在此处可以添加更多rules
]
},
1.7 安装css-loader和style-loader
css-loader和style-loader用来处理样式文件。css-loader用于加载由vue-loader提取出的CSS文件,再用style-loader添加到页面中。具体安装命令如下。
输入命令
npm install [email protected] [email protected] -D
安装后,在webpack.config.js文件中添加rules规则,具体代码如下。
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
},
1.8 安装CSS预处理器
通过CSS预处理器可以使用专门的编程语言来编写页面的样式,然后编译成正常的CSS文件,供项目使用。CSS预处理器为CSS增加了一些编程的特性,用户无须考虑浏览器的兼容性问题,可以使CSS更加简洁、更具有适用性和可读性,更易于代码的维护。
Vue中常用的CSS预处理器包括Less、Sass/SCSS和Stylus,下面我们分别讲解如何进行安装。需要注意的是,在本项目中只用到了Sass/SCSS,必须进行安装,而另外两个CSS预处理器读者可根据自己的需要来决定是否安装。
安装Less,具体命令如下。
npm install less less-loader -D
然后在webpack.config.js文件中添加rules规则,具体代码如下。
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
安装后,在页面中使用Less的地方给<style>添加lang属性即可,示例代码如下。
<style lang="less"></style>
1.9 安装Sass/SCSS
安装Sass/SCSS,具体命令如下。
npm install [email protected] [email protected] -D
然后在webpack.config.js文件中添加rules规则,具体代码如下。
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
安装后,在页面中使用SCSS的地方给<style>添加lang属性即可,示例代码如下。
<style lang="scss"></style>
1.10 安装Stylus
安装Stylus,具体命令如下。
npm install stylus stylus-loader -D
Stylus安装完成之后,在Vue 2.x中不需要配置就可以直接使用,在页面中使用Stylus的地方给<style>添加lang属性即可,示例代码如下。
<style lang="stylus"></style>
1.11 安装MUI
MUI是由DCloud(数字天堂)推出的一款接近原生APP体验的高性能前端框架,在本项目中主要用来快速搭建登录和注册页面。读者需要从官方网站下载MUI,本书使用的版本是mui-3.7.1.zip。下载后,将文件解压出来,然后把dist目录下的所有文件复制到项目的lib\mui目录中。
将MUI安装后,可以在main.js文件中使用如下代码引入。
import './lib/mui/css/mui.css'
1.12 图片和字体文件处理
考虑到项目中使用了外部的MUI样式库,其中包含后缀名为ttf的文件,webpack无法处理该类文件,所以需要安装相应的loader去处理。
file-loader和url-loader都可以在webpack中处理图片、字体图标等文件,后者可以将图片转为base64字符串,能更快地去加载图片,并且可以通过limit属性对图片分情况处理,当图片小于limit(单位byte)大小时转为base64,大于limit时调用file-loader对图片进行处理。
安装file-loader和url-loader,具体命令如下。
npm install [email protected] [email protected] -D
然后在webpack.config.js文件中添加rules规则,具体代码如下。
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: 'url-loader'
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
use: 'url-loader'
},
3。代码实现
1.1 编写首页
创建首页index.html文件,用来展示页面,具体代码如下。
<body>
<div id="app"></div>
</body>
1.2 编写逻辑入口
创建逻辑入口main.js文件,主要用来初始化Vue实例并加载需要的插件及各种公共组件,如vue-router、mui、App.vue等,具体代码如下。
import Vuefrom 'vue' // 引入vue.js
import app from './App.vue' // 引入App.vue组件
import VueRouterfrom 'vue-router' // 引入router. js组件
Vue.use(VueRouter) // 安装vue-router路由模块
import router from './router.js' // 将路由放到单独的文件中
import './lib/mui/css/mui.css'
new Vue({ // 初始化Vue实例
el: '#app', // 将el挂载到index.html文件的<div id="app">
render: c => c(app), // 使用render函数渲染App.vue组件
router // 将router.js文件中导出的router对象注册到Vue实例上
})
1.3 编写路由文件
创建router.js文件,该文件是一个单独的路由文件。在后面的步骤中将会创建Login.vue(登录)和Register.vue(注册)两个组件,所以需要在路由文件中导入这两个组件,并配置相应的路由规则。具体代码如下。
import VueRouterfrom 'vue-router'
// 导入登录和注册对应的路由组件
import Login from './components/Login.vue'
import Register from './components/Register.vue'
varrouter = new VueRouter({// 创建路由对象
routes: [// 配置路由规则
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
})
export default router
1.4 渲染路由组件
创建App.vue文件,该文件是项目的根组件(或者叫作主组件),所有页面都是在App.vue下进行切换的。例如,可以定义公共的样式或者动画等。具体代码如下。
<template>
<div id="app">
<div class="login-container">
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register" tag="span">注册</router-link>
</div>
<router-view></router-view>
</div>
</template>
<style lang="scss" scoped></style>
// scoped表示CSS样式只能作用于当前的组件
1.5 编写登录页面
创建components\Login.vue文件,该文件是登录页面,在页面中提供一个用户登录的表单。具体代码如下。
<template>
<div class="login">
<div class="content">
<form class="mui-input-group login-form">
<div class="mui-input-row"><label>账号</label><input></div>
<div class="mui-input-row"><label>密码</label><input></div>
</form>
<div><button type="button">登录</button></div>
</div>
</div>
</template>
<style scoped></style>
注意:上述代码可以看出,一个单独的组件文件通常应包含<template>模板、<script>逻辑以及<style>样式3部分代码。其中,<script>和<style>可以省略,但<template>不要省略,否则Vue会出现警告。
1.6 编写注册页面
创建components\Register.vue文件,该文件是注册页面,在页面中提供一个用户注册的表单。具体代码如下。
<template>
<div class="register">
<div class="content">
<form class="mui-input-group login-form">
<div class="mui-input-row"><label>账号</label><input></div>
<div class="mui-input-row"><label>密码</label><input></div>
…
</form>
<div><button type="button">注册</button></div>
</div>
</div>
</template>
1.7 运行项目
在命令行中切换到项目根目录下,执行如下命令运行程序
npm run dev
当控制台中出现Compiled successfully时表示编译完成,项目已经启动了,然后在浏览器中打开//localhost:8088,页面效果如下图所示。
1.8 设置导航栏的高亮效果
在上图中,单击顶部的“登录”和“注册”可以在两个页面之间切换,但由于此时还没有设置样式,导航栏并没有高亮效果。默认情况下,路由的导航菜单会自动添加router-link-exact-active和router-link-active这两个class属性,想要设置导航栏的高亮效果,只要在App.vue文件中设置两个class对应的样式即可,如下图所示。
注意:router-link-exact-active和router-link-active两者的区别在于,前者是精确匹配规则,只有完全匹配的情况下有效,而后者是非精确匹配规则,只要定义在path中的路径与当前路径的开头一致就有效。
另外,router-link-exact-active和router-link-active这两个class类名也可以自定义,下面在router.js文件中找到创建路由实例代码,添加自定义class,具体代码如下。
varrouter = new VueRouter({
linkActiveClass: 'my-active', // router-link-active
linkExactActiveClass: 'my-exact-active', // router-link-exact-active
……(原有代码)
})
1.9 编写App.vue文件
然后在App.vue中添加导航栏高亮效果的样式,具体代码如下
<style lang="scss" scoped>
.my-active, .my-exact-active {
background: #007aff;
font-weight: 800;
color: #fff;
}
……(原有代码)
</script>
在浏览器中查看运行结果(导航栏激活效果),页面效果如下图所示。
1.10 使用路由的history模式
路由的history模式可以使项目的URL地址更加简洁。若要使用history模式,需要先修改router.js文件,具体代码如下。
varrouter = new VueRouter({
mode: 'history',// 使用history模式
……(原有代码)
}
history模式还需要服务器的支持,打开webpack.config.js文件,在module.exports对象中添加devServer的配置,具体代码如下。
devServer: {
historyApiFallback: true// 开启服务器对history模式支持
},
当开启history模式后,重新执行npm run dev,就可以使用//localhost:8088/login来访问登录页面,使用//localhost:8088/register来访问注册页面。
1.11 更改页面标题
当页面切换后,网页的标题也应随之发生变化,为了实现这个效果,可以在路由中将每个页面对应的标题保存在meta中。修改router.js文件,如下所示。
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login, meta: { title: '登录' } },
{ path: '/register', component: Register, meta: { title: '注册' } }
]
然后需要调用router.beforeEach()全局钩子函数,用来在路由发生改变时动态修改网页的title标题,它会在路由改变前执行。具体代码如下。
router.beforeEach((to, from, next) => {
// 路由发生改变修改页面title
if (to.meta.title) {
document.title= to.meta.title
}
next()
})
总结:
通过以上的学习,各位笔友应该理解了如何手动搭建一个webpack+Vue项目,掌握了相关loader的安装与使用,包括css-loader、style-loader、vue-loader、url-loader、sass-loader等,熟悉webpack的配置、文件的打包,以及路由的配置及使用。
码字不易,认为楼主写的还不错,对你有帮助的话,请给个三连(关注、点赞、收藏)另外有问题可评论区留言讨论。
后期会完善Vue进阶语法的相关知识,有帮助的话,敬请关注楼主 持续更新中ing 。。。(不定时发文)
转载时请注明出处链接
百度网盘链接,案例源码获取地址:
链接://pan.baidu.com/s/1JCKEn8gQl6sbSz7JERoKFQ?pwd=1234
提取码:1234
参考文档:
1.vue官方文档:Vue.js (vuejs.org)
2.传智播客-黑马程序员(教材)://stu.ityxb.com/
其他随笔推荐:
1. 十大排序算法(Java实现)(作者力推)://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html
2. Vue开发环境的部署://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html
3. Vue基础入门一://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html
4. Vue基础入门二://www.cnblogs.com/zbcxy506/p/note_1vue-03.html
5. Vue基础知识思维导图://www.cnblogs.com/zbcxy506/p/note_1vue-04.html
6.Vue动画和过渡效果://www.cnblogs.com/zbcxy506/p/note_1vue-05.html
7.Vue框架中的路由://www.cnblogs.com/zbcxy506/p/note_1vue-06.html
8.Node多版本管理工具GNVM://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html