文章目录
vue项目的构建工具vue-cli
搭建脚手架vue-cli环境
会用到vue全家桶 vue vue-cli axios vue-router vue-vueX vue-cli
脚手架
一个基于vue的构建工具
搭建vue项目的环境
好处
兼容
方便
快速
可以不用 脚手架（vue-cli）
就可以基于 webpack 打包工具 ，要自己去进行配置
各个版本兼容问题
前端 有一个[配置工程师]下载
模块管理工具, 下载模块
npm
cnpm
yarn
下载任何模块都可以在 npm官网上搜索得到先下载node node -v npm -v
淘宝团队将npm包拷贝到中国cnpm镜像中使得中国服务器下载npm包更快
最好配置一下淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
https://www.npmjs.com/package/vue-cli
cnpm install -g vue-cli
vue -V
先cd 到 项目文件夹里
vue init webpack 你的项目文件夹名
------------------------
别安装
esline testing n
Unit testing n
e2e testing n
----------------------------
file -> setting -> director -> exclude 排除 node_moudeles文件
开启 node 核心库
好处 有提示 有语法高亮提示 有语法检测
enabled
安装 vue 语法检测插件
file -> settings -> plugin -> browse 搜索 vue.js
自定义设置IDE 模板语句
file -> settings -> Editer -> LiveTemplates -> user -> 右上角加号
LiveTemplate 模板设置完毕后需要在vue文件中增加设置
创建项目与运行项目
创建项目
1.打开cmd命令行或者powerShell
2.cd 到项目文件夹下
3.npm run dev
目录结构介绍
index.html
webpack最终会把整个项目打包成一个js文件,在项目下index.html中引入
src目录
是存放着人能够看得懂的代码
static
第三方的一些 图片 css js插件 阿里图标
dist目录
打包完成后所存放的项目，计算机能够看得懂的程序
命令行下输入 npm run build 打包项目，在项目下会生成dist目录，运行其中的html文件需要从服务器上运行
package.json
开发项目，必须有，记录项目所依赖的模块
cnpm/npm install 安装项目的依赖模块
package-lock.json
描述依赖的模块的详情，比package.json安装的速度快很多
开发环境:
例如开发项目
webstorm开发软件，浏览器
生产环境:
例如 上线
代码上传到服务器，需要在服务器里安装浏览器，开发软件？？？不需要
关于src目录下的components 和 router
index.js中引入组件文件
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//另外一种引入组件的写法
// import HelloWorld from '../components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/He', //路径，访问HelloWorld这个组件的路径
name: 'haha',
component: HelloWorld //组件名HelloWorld可随意定义
}
]
})
项目文件夹下:
npm run dev 运行服务器
基于脚手架的指令
杂谈一
选中代码 Ctrl + Alt + l 自动格式化代码,使代码整洁对齐
基于Vue服务器的单页面开发
1.HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2> v-text v-html v-if v-on </h2>
<h2 v-text="vText"></h2>
<h2 v-html="vHtml"></h2>
<h2 v-if="isLogin">请输入用户名: <input type="text"></h2>
<h2 v-else-if="text">else-if</h2>
<h2 v-else="isLogin">请先注册!</h2>
<hr>
<ol>
<li v-for="(item,index) in arr" :key="index">
{{item}}
</li>
</ol>
<hr>
<ol>
<li v-for="(value,key,index) in dataJson" :key="index">
{{key}} - {{value}} - {{index}}
</li>
</ol>
<input type="button" @click="add" value="点击更改标题">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
vText:'v-text',
vHtml: '<ul>' +
'<li>v-html</li>' +
'<li>v-html</li>' +
'<li>v-html</li>' +
'</ul>',
// isLogin:true,
text:'不为空时且isLogin没有值时标签有效',
arr:['123','456','789'],
dataJson:{
name:"越祁",
age:18,
}
}
},
methods:{ //声明事件
add(){
this.msg = '欢迎来到Vue世界'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2.index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//另外一种引入组件的写法
// import HelloWorld from '../components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/He', //路径，访问HelloWorld这个组件的路径
name: 'haha',
component: HelloWorld //组件名HelloWorld可随意定义
}
]
})
3.npm run dev
4.127.0.0.1:8080/#/He
组件的传值 & 组件的引用 & ref获取DOM
1.index.js
管理主页面视图模板,定义放在主页面的模板
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/index'
//另外一种ES6引入组件的写法
// import Index from '../components/index'
Vue.use(Router);
// 外部接口
export default new Router({
routes: [ // 从上至下 依次执行
{
path: '/', //路径，访问HelloWorld这个组件的路径
component: Index //组件名HelloWorld可随意定义
}
]
})
2.index.vue
主页面模板
<template>
<div class="hello">
<!--此处引入main.js中导入的全局组件模板-->
<!--父组件hd-nav 子组件./components/hdNav.vue-->
<hd-nav title="头部导航"></hd-nav>
<h1>index.vue</h1>
<hf-nav :tip="text"></hf-nav>
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
text:'底部导航123'
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
3.main.js
管理全局组件的引入,主要与app.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'
import header from './components/hdNav'
import footer from './components/hfNav'
//全局的组件样式可以放在这里
Vue.component('hdNav',header); //名字随意,名字对应了app.vue(应用管理页面)或者index.vue(主页面)中的模板标签名
Vue.component('hfNav',footer);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
4.app.vue
整个项目App模板，其中 < router-view /> (视图模板)代表主页面模板,如果没有这个模板主页面模板将不显示
可在此 视图模板 上下添加全局组件定义单页面的头部或底部
<template>
<div id="app" ref="abc">
<!--此处引入main.js中导入的全局组件模板-->
<hd-nav title="主页头部导航" style="color:orange"></hd-nav>
<hr>
<!--关于路由的显示,代表index.vue模板的显示-->
<router-view/>
<hr>
<hf-nav ref='ft' tip="主页底部导航" style="color:orange"></hf-nav>
</div>
</template>
<script>
export default {
name: 'App',
//生命周期钩子函数
created(){
//组件创建后,数据已经完成 初始化，但是DOM还未生成
},
mounted(){
//各种数据渲染到DOM上，浏览器全部加载完DOM window.onload
//ref 引用，用在标签中 用来获取DOM元素标签对象
// console.log(this.$refs.abc); //this指针指向Vue实例,this.$refs返回一个对象
//png
this.$refs.abc.style.background = 'lightblue';
console.log( this.$refs.ft.$el ); //返回一个底部模板对象
//png
this.$refs.ft.$el.style.background = 'pink';
// png
},
}
</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>
ref引用
返回ref标记的div对象
返回一个底部模板对象
子组件与父组件的通信(运用于购物车)
1.App.vue
<template>
<div id="app" ref="abc">
<button @click="callB"> A先打电话,(父组件) </button>
<!--关于路由的显示,代表index.vue模板的显示-->
<router-view/>
</div>
</template>
<script>
import connect from './components/call/connector';
export default {
name: 'App',
data(){
return {
}
},
methods:{
callB(){
//事件监听
connect.$on('phone',function (msg) {
console.log( msg ); //当B组件点击事件触发后接受到msg信息
});
},
},
}
</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>
2.index.vue
<template>
<div class="hello">
<!--此处引入main.js中导入的全局组件模板-->
<!--父组件hd-nav 子组件./components/hdNav.vue-->
<button @click="callA"> B-子组件 </button>
</div>
</template>
<script>
import connect from './call/connector'
export default {
name: 'index',
data() {
return {
text:'底部导航123'
}
},
methods:{
callA(){
//第一个参数与事件监听的第一个参数一致
connect.$emit('phone','子组件和父组件通信');
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
3.connector.js
import Vue from 'vue' //从node_modules中引入vue模块
let connector = new Vue();
//外部接口
export default connector
A组件事件点击后开始监听B组件事件
B组件事件点击后传入msg A组件事件监听得到值并打印到控制台
文档分类
路由规则
App.vue
<template>
<div id="app" ref="abc">
<!--此处引入main.js中导入的全局组件模板-->
<hd-nav title="主页头部导航" style="color:orange"></hd-nav>
<hr>
<button @click="callB"> A先打电话,(父组件) </button>
<hr>
<!--跳转页面-->
<!--这里页面跳转会将newsDetail模板直接替换 router-view模板-->
<!--匹配路由选项中的name属性-->
<!--router-link替代a标签的应用-->
<router-link :to="{ name:'news' }">新闻</router-link>
<router-link :to="{ name:'goods' }">商品</router-link>
<hr>
<!--关于路由的显示,代表index.vue模板的显示-->
<router-view/>
<hr>
<hf-nav ref='ft' tip="主页底部导航" style="color:orange"></hf-nav>
</div>
</template>
<script>
import connect from './components/call/connector';
export default {
name: 'App',
data(){
return {
}
},
methods:{
callB(){
//事件监听
connect.$on('phone',function (msg) {
console.log( msg ); //
});
},
},
//生命周期钩子函数
created(){
//组件创建后,数据已经完成 初始化，但是DOM还未生成
},
mounted(){
//各种数据渲染到DOM上，浏览器全部加载完DOM window.onload
//ref 引用，用在标签中 用来获取DOM元素标签对象
// console.log(this.$refs.abc); //this指针指向Vue实例,this.$refs返回一个对象
//png
this.$refs.abc.style.background = 'lightblue';
console.log( this.$refs.ft.$el ); //返回一个底部模板对象
//png
this.$refs.ft.$el.style.background = 'pink';
// png
},
}
</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>
index.js
import Vue from 'vue'
//导入node_modules中下载好的模块vue-router
import Router from 'vue-router'
import Index from '@/components/index'
//另外一种ES6引入组件的写法
// import Index from '../components/index'
//引入模板
import News from '../components/newsDetail'
import Goods from '../components/goodsList'
import NotFound from '../components/404'
//安装 vue-router 插件
Vue.use(Router);
// 外部接口
export default new Router({
// 路由规则
routes: [ // 从上至下 依次执行
{
//重定向,让网址没有时候直接匹配路由/index
path:'/',
redirect:{
name:'index12',
}
},
{
path: '/index', //路径，访问HelloWorld这个组件的路径
name:'index12',
component: Index, //组件名HelloWorld可随意定义
},
{
path:'/newsDetail',
name:'news',
component:News, //先引入在声明模板
},
{
path:'/goodsList',
name:'goods',
component:Goods,
},
{
//监听url后未设置路由的网址
path:'*',
component:NotFound,
},
]
})
路由参数
路由参数，前端将路由参数发送给后台找到相应数据再传到前端
1.query查询参数,通过查询字符串
< router-link :to="{ name:‘goods’,query:{id:1}}">商品</ router-link >
.
2.通过路由传递路由参数
< router-link :to="{ name:‘news’,params:{id:2 }}">新闻</ router-link>
goodsList.vue
<template>
<div class="hello">
<h2>商品详情页面</h2>
</div>
</template>
<script>
export default {
created(){
console.log( this.$route.query.id );
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
newsDetail.vue
<template>
<div class="hello">
<h2>新闻详情页面</h2>
</div>
</template>
<script>
export default {
created(){
console.log( this.$route.params.id );
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
App.vue
<template>
<div id="app" ref="abc">
<!--此处引入main.js中导入的全局组件模板-->
<hd-nav title="主页头部导航" style="color:orange"></hd-nav>
<hr>
<button @click="callB"> A先打电话,(父组件) </button>
<hr>
<!--跳转页面-->
<!--这里页面跳转会将newsDetail模板直接替换 router-view模板-->
<!--匹配路由选项中的name属性-->
<!--router-link替代a标签的应用-->
<!--通过路由传递路由参数-->
<router-link :to="{ name:'news',params:{id:2 }}">新闻</router-link>
<!--query查询参数,通过查询字符串-->
<router-link :to="{ name:'goods',query:{id:1}}">商品</router-link>
<hr>
<!--关于路由的显示,代表index.vue模板的显示-->
<router-view/>
<hr>
<hf-nav ref='ft' tip="主页底部导航" style="color:orange"></hf-nav>
</div>
</template>
<script>
import connect from './components/call/connector';
export default {
name: 'App',
data(){
return {
}
},
methods:{
callB(){
//事件监听
connect.$on('phone',function (msg) {
console.log( msg ); //
});
},
},
//生命周期钩子函数
created(){
//组件创建后,数据已经完成 初始化，但是DOM还未生成
},
mounted(){
//各种数据渲染到DOM上，浏览器全部加载完DOM window.onload
//ref 引用，用在标签中 用来获取DOM元素标签对象
// console.log(this.$refs.abc); //this指针指向Vue实例,this.$refs返回一个对象
//png
this.$refs.abc.style.background = 'lightblue';
console.log( this.$refs.ft.$el ); //返回一个底部模板对象
//png
this.$refs.ft.$el.style.background = 'pink';
// png
},
}
</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>
index.js
import Vue from 'vue'
//导入node_modules中下载好的模块vue-router
import Router from 'vue-router'
import Index from '@/components/index'
//另外一种ES6引入组件的写法
// import Index from '../components/index'
//引入模板
import News from '../components/newsDetail'
import Goods from '../components/goodsList'
import NotFound from '../components/404'
//安装 vue-router 插件
Vue.use(Router);
// 外部接口
export default new Router({
// 路由规则
routes: [ // 从上至下 依次执行
{
//重定向,让网址没有时候直接匹配路由/index
path:'/',
redirect:{
name:'index12',
}
},
{
path: '/index', //路径，访问HelloWorld这个组件的路径
name:'index12',
component: Index, //组件名HelloWorld可随意定义
},
{
path:'/newsDetail/:id',
name:'news',
component:News, //先引入在声明模板
},
{
path:'/goodsList',
name:'goods',
component:Goods,
},
{
//监听url后未设置路由的网址
path:'*',
component:NotFound,
},
]
})
点击 ‘商品’ 后 , url地址栏的id字符串参数用过传给后台得到相应的数据
点击 ’ 新闻’ 后,url地址栏的2路由参数通过传值给后台得到相应的数据
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
