码迷,mamicode.com
首页 > 其他好文 > 详细

vue学习(十一)vue-cli3开发单文件组件

时间:2019-11-27 17:37:53      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:测试   alt   哪些   targe   大型   nts   blank   down   one   

一 单文件组件介绍

二 如何安装Vue-Cli3脚手架

三 快速原型开发

四 vue-cli3生成项目

五 购物车项目搭建

六 购物车项目操作

七 Mock模拟数据

八 如何做数据持久化

九 Vue中使用第三方组件(element-ui)

十 Element的表单组件分析

十一 表单组件设计-Input实现双向数据绑定

十二 表单组件-设计FormItem组件

十三 表单组件设计-如何正确设计表单校验规则

十四 表单组件设计-Form组件检验方法完结

一 单文件组件介绍

    /*
    * 在vue中 把.vue的文件称为 单文件组件 webpack等构建工具
    *
    * 很多项目中使用
    * Vue.components(‘组件名‘,{})
    * new Vue({})
    * 用在中小规模的项目中 会很好 但是大型的项目 就不友好了
    *
    * 有哪些缺点
    * 1. 全局定义 每个名字都不能重复
    * 2. 字符串模板【还好的是es6提供了模板字符串】遇见特殊的符号时 要用 反斜杠来转义 很繁琐
    * 3. 不支持css
    * 4. 没有构建步骤
    *
    * 
    * 以后的模块化开发 包括了 template style script
    * */

 

二 如何安装Vue-Cli3脚手架

①  安装node.js

  https://nodejs.org/en/download/

  保证Node.js 是8.9或者更高的版本

  在终端 node -v 保证已经安装

技术图片

 

 

② 安装 淘宝镜像源

npm  install -g cnpm --registry=https://registry.npm.taobao.org

以后的npm可以使用cnpm来代替

③ 安装Vue Cli3脚手架

cnpm install -g @vue/cli

④ 检查版本是否正确

vue --version

 

三 快速原型开发

使用 vue serve 和 vue build命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:

cnpm install -g @vue/cli-service-global

技术图片

 

 

vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

开始测试

1 npm init

技术图片

 

 

新建一个App.vue文件

<template>
<div><h3>{{msg}}</h3></div>
</template>

<script>
export default {
data(){
return{
msg:‘单文件测试‘
}
}
}
</script>

<style scoped>
h3{
color: red;
}
</style>

然后在这个App.vue文件所在的目录下运行

vue serve

四 vue-cli3生成项目

 

五 购物车项目搭建

六 购物车项目操作

七 Mock模拟数据

八 如何做数据持久化

九 Vue中使用第三方组件(element-ui)

十 Element的表单组件分析

十一 表单组件设计-Input实现双向数据绑定

十二 表单组件-设计FormItem组件

十三 表单组件设计-如何正确设计表单校验规则

十四 表单组件设计-Form组件检验方法完结

vue学习(十一)vue-cli3开发单文件组件

标签:测试   alt   哪些   targe   大型   nts   blank   down   one   

原文地址:https://www.cnblogs.com/a438842265/p/11943872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!