element-ui和npm、webpack、vue-cli搭建Vue项目

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、element-ui的简单使用

1、安装

1. npm 安装
　　推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
　　npm i element-ui -S

2. CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2、element和Vue的使用示例(NavMenu导航菜单的使用)

1. 导入需要使用的JS文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 去element官网找到需要的组件

我们这里简单的展示一下导航菜单，把需要的样式复制到我们的HTML页面(这里我只用一个样式，就只复制那个样式)
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
<el-menu>

3. 定制我们的Vue

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>教育网</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-menu {
            display: flex; /*弹性盒子/CSS3的一个新特性*/
            align-items: center; /*水平居中*/
            justify-content: center; /*垂直居中*/
        }
    </style>
</head>
<body>
<div id="app">
    <my_header></my_header>
    <router-view></router-view>
</div>
<template id="header">
    <div>
        <!--设置了router=true后，el-menu-item就等于router-link，index就等于to-->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/course">免费课程</el-menu-item>
            <el-menu-item index="3">轻课</el-menu-item>
            <el-menu-item index="4">学位课程</el-menu-item>
            <el-menu-item index="5">智能题库</el-menu-item>
            <el-menu-item index="6">公开课</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    let my_header = {
        // 把菜单导航设置成Vue实例的组件
        template: "#header",
        data() {
            return {
                // 默认选中
                activeIndex: '/',
            }
        }
    };
    let url = [
        {
            path: '/',
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },
        {
            path: '/course',
            component: {
                template: `<div><h1>免费课程页面</h1></div>`
            }
        },
    ];
    let router = new VueRouter({
       routes: url
    });
    const app = new Vue({
        el: "#app",
        router: router,
        components: {
            my_header: my_header
        },
    })
</script>
</body>
</html>

View Code

二、Node.js和npm

1、什么是Node.js和npm

Node.js是一个Javascript运行环境(runtime environment)，实质是对Chrome V8引擎进行了封装。
Node.js不是一个 JavaScript 框架，不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库，不能与 jQuery、ExtJS 相提并论。
Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
而npm是Node.js的包管理工具。
好吧，类比一下python：
Node.js就是你的python解释器。
npm就等于python解释器的pip，用于管理(安装，卸载)包的工具。
Node.js有它自己的语法，我们这里安装Node.js主要是为了使用它的npm，方便我们搭建Vue项目，至于它的语法，有兴趣的可自行研究。
注意：node.js和python解释器一样，需要自己到官网去下载并安装。

2、npm介绍和常用指令

1. npm的安装和更新

下载安装Node.js后自带包管理工具npm。
查看安装版本信息：
　　--  node -v  查看Node.js 版本信息
　　--  npm -v  查看npm版本信息
更新npm到指定版本：
　　--  npm install npm@5.3.0 -g
　　-- npm install npm@latest -g 更新最新的稳定版本
命令参数(S、D、g)：
npm install module_name -S    即    npm install module_name –save    下载到dependencies(生产环境)
npm install module_name -D    即    npm install module_name –save-dev 下载到devDependencies(开发环境)
npm install module_name -g 下载到全局
模块将被下载安装到【全局目录】中。
【全局目录】通过 npm config set prefix "目录路径" 来设置。
比如说，当我们使用了npm install -g express安装了express框架后， 我们就可以在电脑里的某一个文件夹下，打开控制台，直接使用express mvc创建项目，如果不是全局安装的会遇到 “'express' 不是内部或外部命令，也不是可运行的程序”错误。
npm install module_name 本地安装,将模块下载到当前命令行所在目录(将安装包放在：命令行所在目录/node_modules 下)

2. npm 常用操作

之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。
有了npm，我们管理自己的依赖包以及版本更加简单。
到自己项目目录下，进行以下命令：
　　-- npm init -y    输入-y使用默认配置项 生成package.json文件。
　　-- npm i jquery@0.0.0   简写i是install的简写 下载依赖  不写@ 默认最新版本
　　-- npm uninstall jquery  卸载依赖包
　　-- npm update jquery   更新依赖包
　　-- npm list  列出已安装的依赖
　　-- npm install webpack --D 保存为开发环境依赖
　　-- 老版本需要 --save 参数 现在不需要了
我们的项目目录下会生成一个 node_modules 目录，我们用npm下的包会在这个目录下。
我们所有的依赖信息放在package.json文件中，包括我们所有的依赖以及版本。
如果我们删掉 node_modules目录，可以使用 npm i  来下载所有依赖。

3. npm 常用配置项

当我们用npm init 的时候用了参数 -y，如果不用-y我们可以进行一些配置。
在我们的package.json文件中有很多配置项
　　-- name  项目名字 中间不能有空格只能用小写
　　-- version  项目版本
　　-- description   项目描述信息
　　-- main  项目的入口文件
　　-- scripts 指定命令的快捷方式 npm run test     test是scripts里的键名 值为具体命令
　　-- author 作者
　　-- license  许可证
　　-- dependencies  生成环境依赖的包以及版本信息
　　-- devDependencies  开发环境的依赖

三、webpack3版本

1、webpack是什么

webpack是一个模块打包器
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适
的格式以供浏览器使用。

2、安装和配置

webpack是跑在Node.js环境下的，所以确定自己有node环境。
安装方式：
　　-- npm install webpack -g  全局安装(webpack3版本可以直接使用webpack安装)
　　-- webpack  <要打包文件>  <打包后文件>     全局这种方式进行打包
　　-- npm install webpack   在自己的项目下 npm init 后在下载webpack 这就是局部安装
　　-- node_modules/.bin/webpack <要打包文件>  <打包后文件>   项目里要打包文件是入口文件
　　-- 路径太长 太烦 可以自定义命令  在package.json 文件的 scripts下面自定义

3、entry 和 output

entry 入口文件  output 出口文件
上面我们自定义命令的时候 命令太长了，而且我们命令太多的时候我们需要每次都自定义多条命令
我们可以把命令写在webpack.config.js文件中
module.export = {
    // 所有的入口文件
    entry: {
         home: './main.js', 
         login: './login.js',
    }, 
    // 出口文件  
    output: {
         filename: '[name].bundle.js',
         path: __dirname + '/dist',
    }       
}
// backage.json  下的scripts
scripts: {
     "pack": "node_moudles/.bin/webpack --watch"
}
//  运行命令
npm run pack

四、webpack4版本(新特性)

1、 在4版本中，webpack不再单独使用，需要webpack-cli

　　-- 全局安装  npm install webpack webpack-cli -g
　　-- 局部安装  npm install webpack webpack-cli -D

2、 增加了模式区分 （development, production）

webpack --mode development/production 进行模式切换
development 开发者模式 打包默认不压缩代码
production  生产者模式 上线时使用，压缩代码。 默认是这个模式

3、默认入口文件(入口文件需自己创建)是./src/index.js，默认输出文件./dist/main.js

-- 当只有一个入口文件也就是src/index.js时，无需增加webpack.config.js
-- 因此打包后，别的HTML页面只需要引入main.js即可使用

4、多入口以及多出口(不是必要的配置项)

// webpack.config.js配置
entry: {
    // 多入口
    a: "./src/js/index.js",
    b: "./src/js/index2.js",
}
output: {
    // 多出口
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].bundle.js'
}

View Code

5、打包

1. 在webpack4中需要手动创建src文件夹，在src文件夹下，新建index.js作为入口文件
2. 打包命令
单独使用webpack打包
    webpack --mode development(开发模式)
    webpack --mode production(生产模式)

6、export/import补充

0. 补充
export default 某个变量
import 变量名1 from xx 
1. my.js
let name = '明仔';
function func() {
    console.log(123);
}
const age = 18;
export {name, func}
// 每个文件只能有一个export default，且只抛出一个值
export default age
2. index.js
import {name, func} from "./my"
// 导入export默认抛出的变量，并改名为aaggee
import aaggee from "./my"
console.log(name);
console.log(aaggee);
func();

五、vue-cli 2版本

1、用vue-cli搭建项目

0. 友情提示
vue-cli自带webpack和vue.js,
当对象的键和值的变量名称相同时，可简写成一个变量，
在vue-cli项目中使用npm下载的包，导入时不需要写路径，直接可以导入，但必须起别名
例如：npm i vue-router
那么：
    在main.js中使用时，只需要直接导入即可
    import VueRouter from 'vue-router'
    // 导入后需要让vue对象使用它
    Vue.use(VueRouter)
vue-cli是官方提供的快速构建这个单页面应用的脚手架。
根据官方文档中的构件流程：前提是已经安装了node.js 否则npm都用不了
1. 使用npm全局安装vue-cli 
    npm install vue-cli -g

常见报错以及解决办法

错误一：
   报错：npm ERR! Unexpected end of JSON input while parsing near '...ectories":{},"dist":{'
   解决办法： npm cache clean --force

错误二：
   如果没有node_moudels文件夹
      执行 npm i
      然后执行 npm run build
      然后再启动项目
   如果在执行npm i 时候遇到第一个错误 按照第一个错误的解决办法
错误三：
   webpack-dev-server 不是内部命令
   请卸载重装
   命令
      npm uninstall vue-cli -g
      npm install vue-cli -g

2. 安装完成后在自己的工作空间里输入下面命令 vue init webpack 项目名称 输入命令后进入安装阶段，需要用户输入一些信息
3. 切换到我们的项目目录下 
    cd 到项目目录下
    npm run dev --> 启动项目
4. 项目中需要使用一些.vue后缀的文件，需要下载vue.js插件
Setting --> Plugins --> 搜索vue.js并下载 --> 重启pycharm

2、目录结构

　　-- build 打包的所有文件
　　-- config 配置文件，执行文件需要的配置信息
　　-- src 资源文件(工作目录) 所有的组件以及所有的图片 都在这个文件夹下
　　-- node_modules  项目的所有依赖包
　　-- static 静态资源
　　-- package.json   依赖包的json文件
   -- index.html 单页面应用

3、Vue搭建的单页面项目解耦分析

1. 项目中的index.html就是我们的单页面
2. src/main.js就是我们这个单页面index.html对应的js文件
3. src/App.vue就是我们这个单页面index.html的app作用域的组件， .vue后缀的文件都是组件的配置信息
4. main.js解析
new Vue({
    el: '#app',
    components:{App},
    template: '<App/>'
})
el: '#app' 是index.html 的<div ></div>
components是注册组件
<App/> 他就是App.vue，是组件的配置信息
根实例的template就是选择vue根实例要加载的组件，会把index.html里面的内容替换成加载的组件的内容
App.vue是主程序，其他所有的.vue都是放在App.vue中，所以只需要加载App.vue就完全可以把其他的东西加载出来
5. 其他组件就放在src/components里面，后缀使用.vue。src/assets是存放图片的
6. .vue后缀的文件就是我们组件的配置信息
7. 把配置信息命名抛出后，在我们的主组件APP.vue可以导入并使用，也就是说其他组件都是抛出给主组件导入使用的
<template>
  <div >
    <h1>这是单页面应用的大组件App组件</h1>
    <!--子组件-->
    <my_header></my_header>
  </div>
</template>
<script>
// 导入子组件配置信息
import MyHeader from "./components/MyHeader"
export default {
  name: 'APP',
  // 在这里定义子组件
  components: {
    my_header: MyHeader
  },
  }
</script>
<style>
</style>
8. 如果需要路由vue-router，则使用npm i vue-router下载这个js
   然后在src下面新建一个routers文件夹用于创建vue-router实例，然后抛出，main.js导入后即可使用路由
9. 在vue-cli的项目中，组件component必须解耦，也就是说component组件的配置内容都得写在一个.vue文件中，然后抛出，导入使用
   component单数，代表只有一个组件，component: 组件名(配置信息名)
   components复数，代表有几个组件，components: {组件名1: 配置信息名1, 组件名2: 配置信息名2}，如果组件名和配置信息名一样，
   可以只写一个名字 components:{组件名1, 组件名2}

4、vue-cli配置JQuery、bootstrap

1. 下载安装
-- npm install jquery 
-- npm install bootstrap 

2. 修改build/webpack.base.conf.js
注意：vue-cli3版本中如果没有webpack.base.conf.js，那么手动创建一个webpack.base.conf.js

const webpack = require('webpack')
// 在module.exports里添加插件
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      // Popper: ['popper.js', 'default']
    })
],
//  *******下面是如果手动下载bootstrap用的*******
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 如果是手动下载的bootstrap需要添加这个配置
      // 'assets': path.resolve(__dirname, '../src/assets'),
      // 'jquery': 'jquery/src/jquery'
    }
  },

View Code

3. 修改主程序的js文件 main.js
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
六、vue-cli 3版本
1、下载vue-cli 3.0
-- npm install @vue/cli -g 
-- 报错 npm error  可以运行下面命令(清理缓存)
-- npm cache clean --force && npm cache verify
2、创建项目
-- vue create 项目名称
3、目录结构以及配置文件
-- vue-cli3 目录更加简单
-- 我们手动在项目根目录下创建vue.config.js里面写vue的配置信息
4、vue-cli3 配置jQuery、bootstrap
-- 跟vue-cli2一样的配置，手动创建一个webpack.base.conf.js 
一、element-ui的简单使用
1、安装
1. npm 安装
　　推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
　　npm i element-ui -S
2. CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2、element和Vue的使用示例(NavMenu导航菜单的使用)
1. 导入需要使用的JS文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 去element官网找到需要的组件
我们这里简单的展示一下导航菜单，把需要的样式复制到我们的HTML页面(这里我只用一个样式，就只复制那个样式)
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
<el-menu>
3. 定制我们的Vue
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>教育网</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-menu {
            display: flex; /*弹性盒子/CSS3的一个新特性*/
            align-items: center; /*水平居中*/
            justify-content: center; /*垂直居中*/
        }
    </style>
</head>
<body>
<div id="app">
    <my_header></my_header>
    <router-view></router-view>
</div>
<template id="header">
    <div>
        <!--设置了router=true后，el-menu-item就等于router-link，index就等于to-->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/course">免费课程</el-menu-item>
            <el-menu-item index="3">轻课</el-menu-item>
            <el-menu-item index="4">学位课程</el-menu-item>
            <el-menu-item index="5">智能题库</el-menu-item>
            <el-menu-item index="6">公开课</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    let my_header = {
        // 把菜单导航设置成Vue实例的组件
        template: "#header",
        data() {
            return {
                // 默认选中
                activeIndex: '/',
            }
        }
    };
    let url = [
        {
            path: '/',
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },
        {
            path: '/course',
            component: {
                template: `<div><h1>免费课程页面</h1></div>`
            }
        },
    ];
    let router = new VueRouter({
       routes: url
    });
    const app = new Vue({
        el: "#app",
        router: router,
        components: {
            my_header: my_header
        },
    })
</script>
</body>
</html>
View Code
二、Node.js和npm
1、什么是Node.js和npm
Node.js是一个Javascript运行环境(runtime environment)，实质是对Chrome V8引擎进行了封装。
Node.js不是一个 JavaScript 框架，不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库，不能与 jQuery、ExtJS 相提并论。
Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
而npm是Node.js的包管理工具。
好吧，类比一下python：
Node.js就是你的python解释器。
npm就等于python解释器的pip，用于管理(安装，卸载)包的工具。
Node.js有它自己的语法，我们这里安装Node.js主要是为了使用它的npm，方便我们搭建Vue项目，至于它的语法，有兴趣的可自行研究。
注意：node.js和python解释器一样，需要自己到官网去下载并安装。
2、npm介绍和常用指令
1. npm的安装和更新
下载安装Node.js后自带包管理工具npm。
查看安装版本信息：
　　--  node -v  查看Node.js 版本信息
　　--  npm -v  查看npm版本信息
更新npm到指定版本：
　　--  npm install npm@5.3.0 -g
　　-- npm install npm@latest -g 更新最新的稳定版本
命令参数(S、D、g)：
npm install module_name -S    即    npm install module_name –save    下载到dependencies(生产环境)
npm install module_name -D    即    npm install module_name –save-dev 下载到devDependencies(开发环境)
npm install module_name -g 下载到全局
模块将被下载安装到【全局目录】中。
【全局目录】通过 npm config set prefix "目录路径" 来设置。
比如说，当我们使用了npm install -g express安装了express框架后， 我们就可以在电脑里的某一个文件夹下，打开控制台，直接使用express mvc创建项目，如果不是全局安装的会遇到 “'express' 不是内部或外部命令，也不是可运行的程序”错误。
npm install module_name 本地安装,将模块下载到当前命令行所在目录(将安装包放在：命令行所在目录/node_modules 下)
2. npm 常用操作
之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。
有了npm，我们管理自己的依赖包以及版本更加简单。
到自己项目目录下，进行以下命令：
　　-- npm init -y    输入-y使用默认配置项 生成package.json文件。
　　-- npm i jquery@0.0.0   简写i是install的简写 下载依赖  不写@ 默认最新版本
　　-- npm uninstall jquery  卸载依赖包
　　-- npm update jquery   更新依赖包
　　-- npm list  列出已安装的依赖
　　-- npm install webpack --D 保存为开发环境依赖
　　-- 老版本需要 --save 参数 现在不需要了
我们的项目目录下会生成一个 node_modules 目录，我们用npm下的包会在这个目录下。
我们所有的依赖信息放在package.json文件中，包括我们所有的依赖以及版本。
如果我们删掉 node_modules目录，可以使用 npm i  来下载所有依赖。
3. npm 常用配置项
当我们用npm init 的时候用了参数 -y，如果不用-y我们可以进行一些配置。
在我们的package.json文件中有很多配置项
　　-- name  项目名字 中间不能有空格只能用小写
　　-- version  项目版本
　　-- description   项目描述信息
　　-- main  项目的入口文件
　　-- scripts 指定命令的快捷方式 npm run test     test是scripts里的键名 值为具体命令
　　-- author 作者
　　-- license  许可证
　　-- dependencies  生成环境依赖的包以及版本信息
　　-- devDependencies  开发环境的依赖
三、webpack3版本
1、webpack是什么
webpack是一个模块打包器
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适
的格式以供浏览器使用。
2、安装和配置
webpack是跑在Node.js环境下的，所以确定自己有node环境。
安装方式：
　　-- npm install webpack -g  全局安装(webpack3版本可以直接使用webpack安装)
　　-- webpack  <要打包文件>  <打包后文件>     全局这种方式进行打包
　　-- npm install webpack   在自己的项目下 npm init 后在下载webpack 这就是局部安装
　　-- node_modules/.bin/webpack <要打包文件>  <打包后文件>   项目里要打包文件是入口文件
　　-- 路径太长 太烦 可以自定义命令  在package.json 文件的 scripts下面自定义
3、entry 和 output
entry 入口文件  output 出口文件
上面我们自定义命令的时候 命令太长了，而且我们命令太多的时候我们需要每次都自定义多条命令
我们可以把命令写在webpack.config.js文件中
module.export = {
    // 所有的入口文件
    entry: {
         home: './main.js', 
         login: './login.js',
    }, 
    // 出口文件  
    output: {
         filename: '[name].bundle.js',
         path: __dirname + '/dist',
    }       
}
// backage.json  下的scripts
scripts: {
     "pack": "node_moudles/.bin/webpack --watch"
}
//  运行命令
npm run pack
四、webpack4版本(新特性)
1、 在4版本中，webpack不再单独使用，需要webpack-cli
　　-- 全局安装  npm install webpack webpack-cli -g
　　-- 局部安装  npm install webpack webpack-cli -D
2、 增加了模式区分 （development, production）
webpack --mode development/production 进行模式切换
development 开发者模式 打包默认不压缩代码
production  生产者模式 上线时使用，压缩代码。 默认是这个模式
3、默认入口文件(入口文件需自己创建)是./src/index.js，默认输出文件./dist/main.js
-- 当只有一个入口文件也就是src/index.js时，无需增加webpack.config.js
-- 因此打包后，别的HTML页面只需要引入main.js即可使用
4、多入口以及多出口(不是必要的配置项)
// webpack.config.js配置
entry: {
    // 多入口
    a: "./src/js/index.js",
    b: "./src/js/index2.js",
}
output: {
    // 多出口
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].bundle.js'
}
View Code
5、打包
1. 在webpack4中需要手动创建src文件夹，在src文件夹下，新建index.js作为入口文件
2. 打包命令
单独使用webpack打包
    webpack --mode development(开发模式)
    webpack --mode production(生产模式)
6、export/import补充
0. 补充
export default 某个变量
import 变量名1 from xx 
1. my.js
let name = '明仔';
function func() {
    console.log(123);
}
const age = 18;
export {name, func}
// 每个文件只能有一个export default，且只抛出一个值
export default age
2. index.js
import {name, func} from "./my"
// 导入export默认抛出的变量，并改名为aaggee
import aaggee from "./my"
console.log(name);
console.log(aaggee);
func();
五、vue-cli 2版本
1、用vue-cli搭建项目
0. 友情提示
vue-cli自带webpack和vue.js,
当对象的键和值的变量名称相同时，可简写成一个变量，
在vue-cli项目中使用npm下载的包，导入时不需要写路径，直接可以导入，但必须起别名
例如：npm i vue-router
那么：
    在main.js中使用时，只需要直接导入即可
    import VueRouter from 'vue-router'
    // 导入后需要让vue对象使用它
    Vue.use(VueRouter)
vue-cli是官方提供的快速构建这个单页面应用的脚手架。
根据官方文档中的构件流程：前提是已经安装了node.js 否则npm都用不了
1. 使用npm全局安装vue-cli 
    npm install vue-cli -g

常见报错以及解决办法
错误一：
   报错：npm ERR! Unexpected end of JSON input while parsing near '...ectories":{},"dist":{'
   解决办法： npm cache clean --force

错误二：
   如果没有node_moudels文件夹
      执行 npm i
      然后执行 npm run build
      然后再启动项目
   如果在执行npm i 时候遇到第一个错误 按照第一个错误的解决办法
错误三：
   webpack-dev-server 不是内部命令
   请卸载重装
   命令
      npm uninstall vue-cli -g
      npm install vue-cli -g
2. 安装完成后在自己的工作空间里输入下面命令 vue init webpack 项目名称 输入命令后进入安装阶段，需要用户输入一些信息
3. 切换到我们的项目目录下 
    cd 到项目目录下
    npm run dev --> 启动项目
4. 项目中需要使用一些.vue后缀的文件，需要下载vue.js插件
Setting --> Plugins --> 搜索vue.js并下载 --> 重启pycharm
2、目录结构
　　-- build 打包的所有文件
　　-- config 配置文件，执行文件需要的配置信息
　　-- src 资源文件(工作目录) 所有的组件以及所有的图片 都在这个文件夹下
　　-- node_modules  项目的所有依赖包
　　-- static 静态资源
　　-- package.json   依赖包的json文件
   -- index.html 单页面应用
3、Vue搭建的单页面项目解耦分析
1. 项目中的index.html就是我们的单页面
2. src/main.js就是我们这个单页面index.html对应的js文件
3. src/App.vue就是我们这个单页面index.html的app作用域的组件， .vue后缀的文件都是组件的配置信息
4. main.js解析
new Vue({
    el: '#app',
    components:{App},
    template: '<App/>'
})
el: '#app' 是index.html 的<div ></div>
components是注册组件
<App/> 他就是App.vue，是组件的配置信息
根实例的template就是选择vue根实例要加载的组件，会把index.html里面的内容替换成加载的组件的内容
App.vue是主程序，其他所有的.vue都是放在App.vue中，所以只需要加载App.vue就完全可以把其他的东西加载出来
5. 其他组件就放在src/components里面，后缀使用.vue。src/assets是存放图片的
6. .vue后缀的文件就是我们组件的配置信息
7. 把配置信息命名抛出后，在我们的主组件APP.vue可以导入并使用，也就是说其他组件都是抛出给主组件导入使用的
<template>
  <div >
    <h1>这是单页面应用的大组件App组件</h1>
    <!--子组件-->
    <my_header></my_header>
  </div>
</template>
<script>
// 导入子组件配置信息
import MyHeader from "./components/MyHeader"
export default {
  name: 'APP',
  // 在这里定义子组件
  components: {
    my_header: MyHeader
  },
  }
</script>
<style>
</style>
8. 如果需要路由vue-router，则使用npm i vue-router下载这个js
   然后在src下面新建一个routers文件夹用于创建vue-router实例，然后抛出，main.js导入后即可使用路由
9. 在vue-cli的项目中，组件component必须解耦，也就是说component组件的配置内容都得写在一个.vue文件中，然后抛出，导入使用
   component单数，代表只有一个组件，component: 组件名(配置信息名)
   components复数，代表有几个组件，components: {组件名1: 配置信息名1, 组件名2: 配置信息名2}，如果组件名和配置信息名一样，
   可以只写一个名字 components:{组件名1, 组件名2}
4、vue-cli配置JQuery、bootstrap
1. 下载安装
-- npm install jquery 
-- npm install bootstrap 

2. 修改build/webpack.base.conf.js
注意：vue-cli3版本中如果没有webpack.base.conf.js，那么手动创建一个webpack.base.conf.js
const webpack = require('webpack')
// 在module.exports里添加插件
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      // Popper: ['popper.js', 'default']
    })
],
//  *******下面是如果手动下载bootstrap用的*******
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 如果是手动下载的bootstrap需要添加这个配置
      // 'assets': path.resolve(__dirname, '../src/assets'),
      // 'jquery': 'jquery/src/jquery'
    }
  },
View Code
3. 修改主程序的js文件 main.js
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
六、vue-cli 3版本
1、下载vue-cli 3.0
-- npm install @vue/cli -g 
-- 报错 npm error  可以运行下面命令(清理缓存)
-- npm cache clean --force && npm cache verify
2、创建项目
-- vue create 项目名称
3、目录结构以及配置文件
-- vue-cli3 目录更加简单
-- 我们手动在项目根目录下创建vue.config.js里面写vue的配置信息
4、vue-cli3 配置jQuery、bootstrap
-- 跟vue-cli2一样的配置，手动创建一个webpack.base.conf.js 
以上是 element-ui和npm、webpack、vue-cli搭建Vue项目 的全部内容，
                        来源链接：
                            utcz.com/z/379915.html
回到顶部