海尔网站的建设目标,在线解析网站,西安专业做网站的公司,网站搭建的流程初始化脚手架
初始化脚手架步骤#xff1a;
第一步#xff08;仅第一次执行#xff09;#xff1a;全局安装vue/cli。 命令#xff1a;npm install -g vue/cli
第二步#xff1a;切换到要创建项目的目录#xff0c;然后使用命令创建项目。 命令#xff1a;vue creat…初始化脚手架
初始化脚手架步骤
第一步仅第一次执行全局安装vue/cli。 命令npm install -g vue/cli
第二步切换到要创建项目的目录然后使用命令创建项目。 命令vue create xxxx
第三步启动项目 npm run serve
备注 如出现下载缓慢请配置npm淘宝镜像npm config set registry https://registry.npm.taobao.org
Vue脚手架隐藏了所有webpack的相关配置若想查看具体的webpakc配置请执行命令vue inspect output.js
脚手架文件结构
├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 ├── package-lock.json包版本控制文件
关于不同版本的Vue说明
vue.js与vue.runtime.xxx.js的区别 1vue.js是完整版的Vue包含核心功能 模板解析器。 2vue.runtime.xxx.js是运行版的Vue只包含核心功能没有模板解析器。因为vue.runtime.xxx.js没有模板解析器所以不能使用template这个配置项需要使用render函数接收到的createElement函数去指定具体内容。
vue.config.js配置文件说明
使用vue inspect output.js可以查看到Vue脚手架的默认配置。使用vue.config.js可以对脚手架进行个性化定制详情见https://cli.vuejs.org/zh
入门案例
main.js
//该文件是整个项目的入口文件//引入Vue
import Vue from vue
//引入App组件它是所有组件的父组件
import App from ./App.vue
//关闭vue的生产提示
Vue.config.productionTip false/*
关于不同版本的Vue1.vue.js与vue.runtime.xxx.js的区别(1).vue.js是完整版的Vue包含核心功能模板解析器。(2).vue.runtime.xxx.js是运行版的Vue只包含核心功能没有模板解析器。2.因为vue.runtime.xxx.js没有模板解析器所以不能使用template配置项需要使用render函数接收到的createElement函数去指定具体内容。
*///创建Vue实例对象vm
new Vue({el:#app,//render函数完成了这个功能将App组件放入容器中render: h h(App)// render:q q(h1,你好啊)// template:h1你好啊/h1,// components:{App},})App.vue
templatedivimg src./assets/logo.png altlogoSchool/SchoolStudent/Student/div
/templatescript//引入组件import School from ./components/School //引入School组件import Student from ./components/Student //引入Student组件export default {name:App,components:{School,Student}}/scriptSchool.vue
templatediv classdemoh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clickshowSchoolName点击弹出学校名称/button /div
/templatescriptexport default {name:School,data(){return {name:替天行道学校,address:梁山}},methods: {showSchoolName(){alert(this.name)}},}
/scriptstyle.demo{background-color: blue;}
/styleStudent.vue
templatediv classdemoh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clickshowSchoolName点击弹出学校名称/button /div
/templatescriptexport default {name:School,data(){return {name:替天行道学校,address:梁山}},methods: {showSchoolName(){alert(this.name)}},}
/scriptstyle.demo{background-color: blue;}
/style基础
ref属性
main.js
import Vue from vueimport App from ./App.vueVue.config.productionTip falsenew Vue({el:#app,render: h h(App)})App.vue
templatedivh6 v-textmessage reftitle/h6button refbtn clickshowDOM点击输出上方的DOM元素/buttonSchool refsch//div/templatescript//引入School组件import School from ./components/Schoolexport default {name:App,components:{School},data() {return {message:欢迎学习Vue}},methods: {showDOM(){console.log(this.$refs.title) //真实DOM元素。console.log(this.$refs.btn) //真实DOM元素。console.log(this.$refs.sch) //School组件的实例对象。}},}/scriptSchool.vue
templatediv classschoolh6学校名称{{name}}/h6h6学校地址{{address}}/h6/div
/templatescriptexport default {name:School,data() {return {name:替天行道学校,address:梁山}},}
/scriptstyle.school{background-color: blue;}
/styleprops配置
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//关闭Vue的生产环境提示
Vue.config.productionTip false//创建vm
new Vue({el:#app,render: h h(App)
})App.vue
templatedivStudent name潘金莲 gender女 :age18//div
/templatescriptimport Student from ./components/Studentexport default {name:App,components:{Student}}
/scriptStudent.vue
templatedivh3{{message}}/h3h6学生姓名{{name}}/h6h6学生性别{{gender}}/h6h6学生年龄{{myAge1}}/h6button clickupdateAge点击修改收到的年龄/button/div
/templatescriptexport default {name:Student,data() {console.log(this)return {message:我是替天行道的学生,myAge:this.age}},methods: {updateAge(){this.myAge}},//简单声明接收// props:[name,age,gender] //接收的同时对数据进行类型限制/* props:{name:String,age:Number,grnder:String} *///接收的同时对数据进行类型限制默认值的指定必要性的限制props:{name:{type:String, //name的类型是字符串required:true, //name是必要的},age:{type:Number,default:99 //默认值},gender:{type:String,required:true}}}/scriptmixin混入(合)
import Vue from vueimport App from ./App.vueimport {hunhe,hunhe1} from ./mixinVue.config.productionTip falseVue.mixin(hunhe)
Vue.mixin(hunhe1)new Vue({el:#app,render: h h(App)
})App.vue
templatedivStudent/hrSchool//div
/templatescriptimport School from ./components/Schoolimport Student from ./components/Studentexport default {name:App,components:{Student,School}}
/scriptStudent.vue
templatedivh6 clickshowName学生姓名{{name}}/h6h6学生性别{{gender}}/h6{{number}}{{number1}}/div
/templatescriptimport {hunhe,hunhe1} from ../mixinexport default {name:Student,data() {return {name:宋江,gender:男}},mixins:[hunhe,hunhe1]}
/scriptSchool.vue
templatedivh6 clickshowName学校名称{{name}}/h6h6学校地址{{address}}/h6{{number}}{{number1}}/div
/templatescriptimport {hunhe,hunhe1} from ../mixinexport default {name:School,data() {return {name:替天行道学校,address:梁山,number:8}},mixins:[hunhe,hunhe1],}
/scriptmixin.js
export const hunhe {methods: {showName(){alert(this.name)}},mounted() {console.log(你好啊)},
}export const hunhe1 {data() {return {number:10,number1:11}},
}插件
plugins.js
export default {install(Vue,x,y,z){console.log(x,y,z)//全局过滤器Vue.filter(mySlice,function(value){return value.slice(0,4)})//定义全局指令Vue.directive(fbind,{//指令与元素成功绑定时一上来bind(element,binding){element.value binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value binding.value}})//定义混入Vue.mixin({data() {return {number:10,number1:11}},})//给Vue原型上添加一个方法vm和组件实例对象就都能用了Vue.prototype.hello (){alert(你好)}}}main.js
import Vue from vueimport App from ./App.vueimport plugins from ./pluginsVue.config.productionTip false//应用使用插件
Vue.use(plugins,1,2,3)new Vue({el:#app,render: h h(App)
})App.vue
templatedivSchool/hrStudent//div
/templatescriptimport School from ./components/Schoolimport Student from ./components/Studentexport default {name:App,components:{School,Student}}
/scriptSchool.vue
templatedivh6学校名称{{name | mySlice}}/h6h6学校地址{{address}}/h6button clicktest点击测试一个hello方法/button/div/templatescriptexport default {name:School,data() {return {name:替天行道学校,address:梁山,}},methods: {test(){this.hello()}},}
/scriptStudent.vue
templatedivh6学生姓名{{name}}/h6h6学生性别{{gender}}/h6input typetext v-fbind:valuename/div
/templatescriptexport default {name:Student,data() {return {name:宋江,gender:男}},}
/scriptscoped样式
main.js
import Vue from vueimport App from ./App.vueVue.config.productionTip falsenew Vue({el:#app,render: h h(App)
})App.vue
templatedivh1 classtitle你好啊/h1School/Student//div
/templatescriptimport Student from ./components/Studentimport School from ./components/Schoolexport default {name:App,components:{School,Student}}
/scriptstyle scoped.title{color: red;}
/styleSchool.vue
templatediv classdemoh6 classtitle学校名称{{name}}/h6h6学校地址{{address}}/h6/div
/templatescriptexport default {name:School,data() {return {name:替天行道学校,address:梁山,}}}
/scriptstyle scoped.demo{background-color: blue;}
/styleStudent.vue
templatediv classdemoh6 classtitle学生姓名{{name}}/h6h6 classone学生性别{{gender}}/h6/div
/templatescriptexport default {name:Student,data() {return {name:宋江,gender:男}}}
/scriptstyle langless scoped.demo{background-color: pink;.one{font-size: 40px;}}
/style案例
