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 文件，编写组件信息

<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 安装

第二步：引用