vue-模块化及vue-cli 4--day06

最新推荐文章于 2021-08-05 15:27:05 发布

Fiee Dust Heart

最新推荐文章于 2021-08-05 15:27:05 发布

阅读量319

点赞数

分类专栏： vue 文章标签： vue js babel

本文链接：https://blog.csdn.net/qq_45062586/article/details/105336012

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

个人blog-1：拾忆生活
个人blog-2：极简-拾忆生活
欢迎大家来踩，同步更新

vue-模块化和vue单文件

1.模块化的分类

A.浏览器端的模块化

AMD(异步模块定义)
- Require.js
CMD(通用模块定义)
- Sea.js

B.服务器端的模块化： $\color{red}CommonJS$ （node.js）

require 引入其他模块或者包
exports 或者 module.exports 导出模块成员
每一个js文件就是一个模块，都拥有独立的作用域

C.ES6模块化（浏览器端与服务器端通用）： $\color{red}babel$

import 关键字，导入模块成员
export 关键字，暴露模块成员
每一个js文件都是独立的模块

2.babel

1.安装babel
- npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
- npm install --save @babel/polyfill
2.创建 babel.config.js

babel.config.js

const presets = [
    ["@babel/env",{
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]
//暴露
module.exports = { presets }

3.创建index.js文件作为入口文件
- 在index.js中输入执行代码，例如：console.log("ok");
4.使用npx执行文件
- npx babel-node ./index.js

3.babel设置导入/导出

A.默认导出

test1.js

//格式
export default {
    变量,
    函数,
    .......
},
//例子
let num = 100;
function show() {
  console.log('1')
}
export default{
    num,
    show
}

B.默认导入

一个文件不要写多个 export default

test2.js

//格式
import 接收文件名称 from "模块标识符"
//例子
import test1 from "./test1.js"

C.按需导出

test3.js

export let num = 100;
export let myName = "jack";
export function show() {
  console.log('1')
}

D.按需导入

as 是函数的别名

test4.js

import { num, myName , show as s } from "./test3.js"

E.同时导出（按需和默认）

test5.js

let num = 100;
function show() {
  console.log('1')
}

export default{
    num,
}
export function show() {
  console.log('1')
}

F.同时导入（按需和默认）

test6.js

import test5,{ show as s } from "./test5.js"

G.可以直接导入并执行代码，原文件没有暴露

如原文件a.js

for (let i = 0; i < 3; i++) {
  console.log(i)
}

文件b.js 直接执行：import "./a.js";

3.webpack

模块化支持
代码压缩混淆
解决js兼容问题
性能优化

4.webpack使用

见 webpack-打包基础.md

5.Vue单文件组件

传统Vue组件的缺陷

全局定义的组件不能重名，
字符串模板缺乏语法高亮，
不支持css
只能使用H5和ES5，不能使用预处理器（babel）

每一个Vue单文件组件【三部分】

template 组件组成的模板区域
script 组成的业务逻辑区域
style 样式区域
安装 Vetur 插件可以使得.vue文件中的代码高亮

简单代码

style scoped 防止样式冲突

<template>
    组件代码区域
</template>
<script>
    js代码区域
</script>
<style scoped>
    样式代码区域
</style>

6.vue-webpack【配置.vue文件的加载器】

1.安装vue
- npm install vue -S
2.安装 vue 组件的加载器
- npm install vue-loader vue-template-compiler -D
3.配置规则

webpack.config.js

//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件
    template:"./src/index.html",
    //设置生成的预览页面名称
    filename:"index.html"
})

//导入包
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();

module.exports = {
    ......
    module : {
        rules:[
            ...//其他规则
            {
                test:/\.vue$/,
                loader:"vue-loader",
            }
        ]
    },
    plugins:[ htmlPlugin, vuePlugin ],
}

4.在index.js中引入vue
- import Vue from "vue"

例：

src/index.js

render 渲染App.vue组件

import Vue from 'vue'
// 导入单文件组件
import App from './components/App.vue'

const vm = new Vue({
  el: '#app',
  render: h => h(App)
})

src/components/App.vue

<template>
  <div>
    <h1>这是 App 根组件</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

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

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
     ···
    <script src="/index.js"></script>
  </head>
  <body>
    <!-- 将来要被 vue 控制的区域 -->
    <div id="app"></div>
  </body>
</html>

7.使用webpack打包发布项目并发布

1.配置package.json

    "scripts":{
        //用于开发调试命令
         "dev": "webpack-dev-server --open --host localhost --port 3000",
         //用于打包命令
        "build":"webpack -p"
    }

2.在项目打包之前，可以将dist目录删除，生成全新的dist目录
3.运行
- npm run build

8.Vue脚手架【快速生成Vue项目基础的架构】

安装3.x版本的Vue脚手架：
- npm install -g @vue/cli
查看安装vue-cli版本
- vue -V
创建Vue项目：【两种】

A.使用命令行创建Vue项目

vue create my-project 【项目名称必须英文】
- 选项一：
  - default (babel, eslint) 【默认创建项目】
  - Manually select features【手动创建项目】☆
- 选项二：（勾选特性可以用空格进行勾选）
  - (*) Babel
  - ( ) TypeScript
  - ( ) Progressive Web App (PWA) Support
  - ( ) Router
  - ( ) Vuex
  - ( ) CSS Pre-processors
  - (*) Linter / Formatter
  - ( ) Unit Testing
  - ( ) E2E Testing
- 选了Router后的选项：（Use history mode for router?是否选用历史模式的路由）
  - 选择 n
- 选了Linter / Formatter后的选项1：（Pick a linter / formatter config 是ESLint选择）
  - 选择 ESLint + Standard config
- 选了Linter / Formatter后的选项2：（Pick additional lint features 何时进行ESLint语法校验）
  - 选择 Lint on save
- 选了Babel后的选项：（Where do you prefer placing config for Babel, ESLint, etc.?配置文件如何放置）
  - 选择 In dedicated config files (单独使用文件进行配置)
- 最后是否创建下次的快捷模板（是否保存为模板）
  - 选择：n
- 跳转到项目，并让项目运行
  - cd my-project
  - npm run serve

B.基于ui界面创建Vue项目

打开vue-cli的浏览器图形面板
- vue ui
1.命名项目名
2.为git添加初始化信息
- 如：init project2
3.下一步，选手动
4.下一步，选择
- Babel
- router
- Linter / Formatter
- 选择使用配置文件
5.下一步，
- 第一行默认
- 第二行，选择ESLint + Standard config
- 第三行，选择Lint on save
6.创建项目
- 不保存预设

9.Vue脚手架生成的项目结构

my-project/
|
+- node_modules/            <-- 所有依赖包
|
+- public/                  <-- 静态资源目录
   |
   +- favicon.ico           <-- ico
   |
   +- index.html            <-- 首页
|
+- src/                     <-- 源码目录
   |
   +- assets/               <-- 资源目录
      |
      +- logo.png
   |
   +- components/           <-- vue组件目录
      |
      +- HelloWorld.vue
   |
   +- views/                <-- vue视图组件目录
      |
      +- About.vue
      |
      +- Home.vue
   +- router/               <-- 路由目录
      |
      +- index.js
   |
   +- App.vue               <-- 项目的根组件
   |
   +- main.js               <-- 项目的包入口文件
|
+- 其他配置文件、忽略文件、README

10.Vue脚手架的自定义配置

通过单独的配置文件进行配置，创建 vue.config.js
- open:true 自动打开浏览器
- port:3000 端口号3000

vue.config.js

module.exports = {
    devServer:{
        port:3000,
        open:true
    }
}

11.Element-UI的基本使用

方式一

1.安装：
- npm install element-ui -S
2.导入使用：
3.运行
- npm run serve

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 手动配置 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
     <!--element-ui-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

$\color{red}注意出错：$

Newline required at end of file but not found
必须在App.vue的最后一个标签 </style> 后再多一行空行，enter键即可

方式二【vue-ui】

1.打开图像面板
- vue ui
2.点击插件，添加插件
- 搜索 vue-cli-plugin-element
3.How do you want to import Element?
- import on demand
4.在项目目录中会生成 plugins/element.js 文件
5.添加代码
- 同上第一种

Fiee Dust Heart

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-模块化及vue-cli 4--day06

vue-模块化和vue单文件1.模块化的分类A.浏览器端的模块化AMD(异步模块定义)Require.jsCMD(通用模块定义)Sea.jsB.服务器端的模块化：CommonJS\color{red}CommonJSCommonJS（node.js）require 引入其他模块或者包exports 或者 module.exports 导出模块成员每一个js文件...
复制链接

扫一扫

专栏目录