vue-cli3开发单文件组件

vue-cli3开发单文件组件

Vue.component('组件名',{

})
new Vue({})

缺点

• 全局定义组件的名字时不能重复
• 字符串模板 es6提供了模板字符串 \
• 不支持css
• 没有构建步骤 Pug Babel .vue

在vue中把.vue的文件称为 单文件组件，webpack等构建工具

Vue CLI3 脚手架

基本配置

• 安装Nodejs
  • 保证Node.js8.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 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

需要的仅仅是一个 App.vue 文件：

<template>
    <div>
        <h2>hello world 单页面组件</h2>
    </div>
</template>
<script>
export default {
    
}
</script>
<style>
    
</style>

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

vue serve

安装3.x版本的Vue脚手架：

npm install -g @vue/cli

基于3.x版本的脚手架创建Vue项目：

1).使用命令创建Vue项目
    命令：vue create my-project
    选择Manually select features(选择特性以创建项目)
    勾选特性可以用空格进行勾选。
    是否选用历史模式的路由：n
    ESLint选择：ESLint + Standard config
    何时进行ESLint语法校验：Lint on save
    babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
    是否保存为模板：n
    使用哪个工具安装包：npm
2).基于ui界面创建Vue项目
    命令：vue ui
    在自动打开的创建项目网页中配置项目信息。
3).基于2.x的旧模板，创建Vue项目
    npm install -g @vue/cli-init
    vue init webpack my-project

分析Vue脚手架生成的项目结构

node_modules:依赖包目录
public：静态资源目录
src：源码目录
src/assets:资源目录
src/components：组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:

Vue脚手架的自定义配置

A.通过 package.json 进行配置 [不推荐使用]
    "vue":{
        "devServer":{
            "port":"9990",
            "open":true
        }
    }
B.通过单独的配置文件进行配置，创建vue.config.js
    module.exports = {
        devServer:{
            port:8888,
            open:true
        }
    }

Element-UI的基本使用

Element-UI:一套基于2.0的桌面端组件库
官网地址：http://element-cn.eleme.io/#/zh-CN
A.安装：
npm install element-ui -S
B.导入使用：
import ElementUI from “element-ui”;
import “element-ui/lib/theme-chalk/index.css”;
Vue.use(ElementUI)