Day 84 VUE——脚手架
VUE——脚手架
单文件组件介绍
vue-cli3 开发单文件组件
目前使用 vue 存在的缺点
1.全局定义组件的名字不能重复
2.字符串模板,es6 虽然提供了模板字符串,但需要特殊符号时,整个模板就会显得不整洁
3.不支持 css
4.没有构建步骤
单文件组件可以解决以上问题,在 vue 中把 .vue 的文件称为 单文件组件,webpack 构建工具可以识别 .vue 文件
安装Vue-cli3脚手架
第一步:官网下载并安装 node
第二步:检测 node 是否安装成功 命令行:node -v 查看版本
第三步:为了以后下载安装插件便利,安装淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后 npm 可以代替 cnpm
第四步:安装 Vue Cli3 脚手架
cnpm install -g @vue/cli
第五步:检查其版本是否正确
vue --version
快速原型开发
使用 vue server 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要额外安装一个全局的扩展
npm install -g @vue/cli-service-global
vue server 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发
新建项目
选中需要文件夹,在终端打开
第一步:npm init 初始化,可以设置项目名、版本、作者等信息,不需要设置的直接回车
第二步:在文件中查看生成的 package.json 文件
第三步:新建 App.vue 文件,编写组件信息
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div> <h3 class="active">{{msg}}</h3> </div> </template> <script> export default { data(){ return{ msg:'这个是个脚手架' }; } }; </script> <style scoped> .active{ color: red; } </style>
第四部:在终端使用 vue serve ,使其在浏览器中打开
这种方法仅限于快速原型开发,归根结底还是要使用 vue.cli3 来启动项目
vue-cli3生成项目
第一步:创建项目 vue create mysite
第二步:选择 Manually select features,首次创建项目需要设置模板,使用空格进行选中,最后设置模板名称,在下次创建项目时可以直接使用
第三步:进入项目目录 cd fileName
第四步:启动项目 npm run serve
Vue中使用第三方组件(element-ui)
第一步:安装 npm i element-ui -S,在 vue-cli 中可以使用 vue add element 安装
第二步:引用