1.Vue-cli脚手架
vue2是对新手很友好的MVVM框架,有完善的官方中文文档,阅读起来也非常容易理解,由浅入深,示例完整。同时官方也提供了一个开箱即用的 vue-cli
帮我们生成一个完整的项目框架。
vue-cli
这个构建工具大大降低了 webpack
的使用难度,开箱即用的特性,大大降低了我们的学习成本,加快了我们的开发速度。
安装 vue-cli (这里我们确认已安装过node)
使用 npm
全局安装 webpack
,打开命令行工具输入:npm install webpack -g
,安装完成之后输入 webpack -v
,如果出现相应的版本号,则说明安装成功。
注意:webpack 4.X
开始,需要安装 webpack-cli
依赖 ,所以使用这条命令
npm install webpack webpack-cli -g
PS D:\Notes> webpack -v
4.16.2
全局安装 vue-cli
在命令行中输入 npm install -g vue-cli
安装完成后,检验是否安装成功,输入 vue-V
(注意:这里是大写的 “V”),如果出现版本号,则说明安装成功。
PS D:\Notes> vue -V
3.0.5
打开 node 的安装目录,也可以看到我们全局安装的 vue-cli
用 vue-cli
来构建项目。
首先,在D盘新建一个文件夹作为项目的存放地,然后cd到目录下,输入命令,创建项目
vue init webpack vue-demo
等待模板下载成功后,会有一个交互式的选项让你选择:
? Project name vue-demo # 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router,路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,我选的NPM
安装完成后,安装提示,cd 到项目目录, 执行命令 npm install
进行初始化。
# Project initialization finished!
# ========================
To get started:
cd vue-demo
npm run dev
如果安装速度太慢。可以把 npm 的安装源指向 淘宝镜像,这里就不赘述了。
启动项目
npm run dev
DONE Compiled successfully in 4014ms
I Your application is running here: http://localhost:8080
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config里的index.js 的 post
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {}, // 这里可以配置跨域
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // 端口 就是改这里
autoOpenBrowser: false, // 这里是ture的话,就会自动打开浏览器
我的端口没有被占用,所以直接启动成功,打开 http://localhost:8080 就能看到欢迎页面。
vue-cli 的 webpack 配置分析
从 package.json 可以看到 开发 和 生产 环境的入口。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js"
},
发环境的启动命令
build 是生产打包环境的命令
lint 是ESLint的检查命令 在 --ext 前加一个 --fix 可以自动修复不符合规范的代码
打包上线
运行 npm run build
命令,就可以进行打包工作了,打包完成后,会生成 dist
目录,项目上线时,把dist
目录下的文件放到服务器就可以了。
调试工具 vue-tool
在谷歌商店,搜索这个插件,安装到浏览器,调试项目很好用。
另:
1.npm 开启了npm run dev以后怎么退出或关闭?
ctrl+c
2.--save-dev
自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
3. --save-dev 与 --save 的区别
--save 安装包信息将加入到dependencies(生产阶段的依赖)
--save-dev 安装包信息将加入到devDependencies(开发阶段的依赖),所以开发阶段一般使用它
2.将index.html与组件分开
首先访问index.html会通过main.js找到App.vue,而App.vue可以套其他的vue子组件
1.首先创建组件
<template>
<div>展示网页内容</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
</style>
2.让组件与路由绑定
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
//让主页返回到home组件
path: '/',
name: 'Home',
component: Home
},
{
//绑定home组件
path: '/home',
name: 'Home',
component: Home
},
{
//绑定about组件
path: '/about',
name: 'About',
component: About
}
]
})
3.将两个子组件放到app.vue跟组件上
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4.路由已经由vue自动绑定了就不用再管了
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.嵌套路由
1.嵌套路由的使用场景
当项目中有选项卡时,切换选项卡按钮,页面中间部分的内容会变,但是选项卡按钮不会变;页面中间部分内容的变化就可以通过二级子路由实现,中间部分显示的内容就是二级子路由的内容
2.举个例子
在组件中:
<router-view>
是用来渲染通过路由映射过来的组件,当路径更改时,<router-view>
中的内容也会发生更改
<template>
<div class="me">
<div class="me-header">个人中心</div>
<h3>二级路由,嵌套路由</h3>
<div class="tab">
<router-link to="/me/a">
<div class="children">我是a组件</div>
</router-link>
<router-link to="/me/b">
<div class="children">我是b组件</div>
</router-link>
<router-link to="/me/c">
<div class="children">我是c组件</div>
</router-link>
</div>
<router-view/>
</div>
</template>
在router的index中子路由配置:
{
path: '/me',
name: 'me',
component: ()=> import('@/views/me.vue'),
children: [
{
path: 'a',
component: () => import('@/components/me/a.vue'),
},
{
path: 'b',
component: () => import('@/components/me/b.vue'),
},
{
path: 'c',
component: () => import('@/components/me/c.vue'),
},
]
}
点击“我是a组件”按钮路由就渲染me下的a组件内容,点击“我是b组件”按钮路由就渲染me下的b组件内容,点击“我是c组件”按钮路由就渲染me下的c组件内容
效果如下:
点击我是a组件
点击我是b组件
点击我是c组件