代做网站关键词排名,网络系统工程师,阿里云做的网站空间,网站开发开票交税4 vue-cli 脚手架
1 脚手架介绍 vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具#xff0c;这个命令可以帮助我们快速的创建一个vue项目的基础架子。 脚手架#xff1a;搭建好的一个架子#xff0c;我们在架子上进行开发 开箱即用零配置基于webpack、webpac…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-cli2.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键点击鼠标左键即可访问如下 退出服务器, 两下ctrlc 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 settingshost: localhost, // can be overwritten by process.env.HOSTport: 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 charsetutf-8
meta nameviewport contentwidthdevice-width,initial-scale1.0
titlework5/title
/head
body
hello vue
div idapp/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 ./routerVue.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 idappimg src./assets/logo.pngrouter-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 逻辑 jsstyle 样式 css
案例 App.vue
template·!--书写html标签只有一个根标签--div idapp!-- img src./assets/logo.pngrouter-view/ --·!--插值表达式--span{{msg}}/span/div
/templatescript
//书写vue代码
export default {data(){return {msg : hello vue}}
}/*以后不用这样书写了new Vue({data(){return {msg:hello vue}}});*/
/scriptstyle/*书写css样式*/span{color : red}
/style小结
1.template标签中只能有一个根标签 2.在App.vue中以后不用再书写
new Vue({data(){return {msg:hello vue}}});直接导出
scriptexport default {data(){return {msg:hello vue}}}
/script3.3 路由
介绍
前端的路由指的是路径和组件(.vue结尾的文件)的映射关系
【1】 【2】 import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorldVue.use(Router)export default new Router({routes: [{path: /, // 这里的路径/映射到组件component的HelloWorldname: 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
/templatescript
export default {data(){return {name : 张三}}
}
/scriptstyle/style3、在 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 templatediv idappimg src./assets/logo.png !-- 注意这里需要加# --a href#/发现vue/aa href#/users发现好友/abr!-- 组件的输出位置 --router-view//div/templatescript/scriptstyle/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目录下
