4 vue-cli 脚手架
1 脚手架介绍
vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。脚手架：搭建好的一个架子，我们在架子上进行开发
- 开箱即用
- 零配置
- 基于webpack、webpack-dev-server
https://cli.vuejs.org/zh/guide/
2 快速入门
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
【1】切换到当前项目目录：
使用cd 命令切换
【2】在项目目录下执行下面的命令
cnpm install vue-cli -g # 只需安装一次， 可以使用cnpm安装,通过
# Windows使用 `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
# work5是模块名字
vue init webpack work5
#Mac 使用
sudo vue init webpack vuedemo
##查看vue版本
vue --version
效果：
如果安装vue脚手架之后, vue init命令无法识别, 可以尝试在vscode在任务管理器中关闭进程,再启动
说明：use ESLint to lint …表示代码检测，不需要，所以设置为no
注意：时间会长一点，有可能几分钟。
下载成功后如下显示：
注意：在vue脚手架中文件后缀名是.vue称为组件。App.vue称为根组件。
- 然后到模块目录下运行 (cd 工程名 )
npm run dev
浏览器访问 http://localhost:8080/#/
或者在vscode终端中按住ctrl键，点击鼠标左键即可访问，如下：
- 退出服务器, 两下ctrl+c
3 基础介绍
3.1 服务器设置
【1】问题：为什么执行上述命令npm run dev，就可以使用浏览器访问网址?
1.使用npm命令的时候我们首先需要找到vue脚手架中的package.json文件
在该文件中具有webpack-dev-server，它表示开发服务器命令，该命令要读取build目录下的配置文件webpack.dev.conf.js
【2】webpack.dev.conf.js文件说明：
1.
2.webpack.base.conf配置文件：
conf/index.js
注意：对于该文件我们必须掌握如何修改开发服务器的几个配置即可，上述的内容了解即可
proxyTable: { //代理配置(能够发送跨域请求)
"/": {
target: "http://localhost:8080",
changeOrigin: true
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8090, //修改成8090避免跟tomcat8080冲突
autoOpenBrowser: true, // npm run dev 自动打开浏览器
【3】修改index.js文件的参数
【4】在终端执行如下命令：
此时就会自动打开浏览器：
小结：
说明：最后我们只需要关注config目录下的index.js文件，修改内容如下：
3.2 目录分析
1. index.html是页面, 不用动,提供一个最基础的页面
2. src/main.js是入口程序, 不用动, 渲染了App.vue组件
3. src/App.vue是根组件, 默认有很多的内容，可以编辑
【1】index.html页面说明
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>work5</title> </head> <body> hello vue <div id="app"></div> hello vue1 <!-- built files will be auto injected --> </body> </html>页面效果：
说明：接下来我们要学习如何在index.html页面上使用标签
显示如上页面的内容。
【2】main.js
1.src/main.js是入口程序, 不用动, 渲染了App.vue组件
2.main.js文件代码
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. //vue脚手架需要导入vue import Vue from 'vue' //导入src下面的App.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】App.vue
1.src/App.vue是根组件, 默认有很多的内容，可以编辑
2.代码
<!-- 1.template相当于body标签 --> <template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <!--书写js代码--> <script> export default { name: 'App' } </script> <!--书写css代码--> <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>
vue单文件组件的说明
一个.vue文件就是一个组件,后续开发vue，所有的功能都是基于组件实现。
安装插件(.vue文件才会有提示)
注意：vscode默认不支持vue,.vue文件是vue脚手架特有的，不像.html .css等通用性文件，所以需要安装如下插件
一个单文件组件由三部分构成
- template(必须) 影响组件渲染的结构 html
- 只能有一个根元素
- script 逻辑 js
- style 样式 css
案例 App.vue
<template>
·<!--书写html标签，只有一个根标签-->
<div id="app">
<!-- <img src="./assets/logo.png">
<router-view/> -->
·<!--插值表达式-->
<span>{{msg}}</span>
</div>
</template>
<script>
//书写vue代码
export default {
data(){
return {
msg : "hello vue"
}
}
}
/*
以后不用这样书写了
new Vue({
data(){
return {
msg:"hello vue"
}
}
});
*/
</script>
<style>
/*书写css样式*/
span{
color : red
}
</style>
小结：
1.template标签中只能有一个根标签
2.在App.vue中以后不用再书写
new Vue({
data(){
return {
msg:"hello vue"
}
}
});
直接导出：
<script>
export default {
data(){
return {
msg:"hello vue"
}
}
}
</script>
3.3 路由
介绍
前端的路由指的是路径和组件(.vue结尾的文件)的映射关系
【1】
【2】
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 这里的路径/映射到组件component的HelloWorld
name: 'HelloWorld',
component: HelloWorld
}
]
})
1.以上说明 路径 / 映射 组件HelloWorld
2.组件输出位置 用标签
在根组件App.vue中使用标签引入HelloWorld组件内容。
一般组件放在 src/views(或pages) 文件夹 和 src/components文件夹
练习
目的：页面（组件）、路由配置
需求：模拟网易云音乐
实现：
1、在src目录下创建 views 文件夹
2、在views文件夹下创建 userList.vue 组件文件
<template>
<!--有且只有一个根标签-->
<div>
{{name}}
</div>
</template>
<script>
export default {
data(){
return {
name : "张三"
}
}
}
</script>
<style>
</style>
3、在 router/index.js 下定义页面路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import userList from '@/views/userList' //引入新的组件
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ // 定义组件的路径
path: '/users',//随便定义,组件路径
name: 'userlist', //随便定义，组件名
component: userList //需要和上面的import userList from '@/views/userList' import后面的userList一致
}
]
})
说明：至于在根组件App.vue中引入哪个组件由用户在浏览器地址栏上输入哪个组件的路径决定的：
-
修改根组件App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <!-- 注意：这里需要加# --> <a href="#/">发现vue</a> <a href="#/users">发现好友</a><br> <!-- 组件的输出位置 --> <router-view/> </div> </template> <script> </script> <style> </style>
4、控制台使用 npm run dev 运行
浏览器输入 ： http://localhost:8090/#/
# 1.对于index.html和main.js文件我们不需要修改
# 2.main.js文件引入根组件App.vue
# 3.根组件App.vue包含其他组件即components目录或者自己创建的views目录下的组件，组件以 .vue结尾的文件
# 4.修改完组件一定要修改路由
# 5.自己的图片一般存放在static目录下
