element-ui和npm、webpack、vue-cli搭建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>

二、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  全局安装

　　-- npm install webpack -D  在自己的项目下 npm init 后再下载webpack 这就是局部安装

webpack3打包：

第一步 要在项目根目录用npm init初始化，生成package.json文件

第二步 安装webpack

第三步 使用Webpack打包
    -- 入口文件： 要打包的文件， 出口文件：打包后的文件

    -- 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、默认入口文件

-- webpack4.x中默认找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'

}

5、打包

1. 在webpack4中需要手动创建src文件夹，在src文件夹下，新建index.js作为入口文件

. 打包命令

单独使用webpack打包(不需要指定入口文件和出口文件，因为上面说了，默认入口是src/index.js，默认出口是dist/main.js)

    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();

import和require的区别

node编程中最重要的思想就是模块化，import和require都是被模块化所使用。

遵循规范

require 是 AMD规范引入方式

import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

调用时间

require是运行时调用，所以require理论上可以运用在代码的任何地方

import是编译时调用，所以必须放在文件开头

本质

require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量

import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

require / exports ：

遵循 CommonJS/AMD，只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。

用法只有以下三种简单的写法：

# 导出

exports.fs = fs

module.exports = fs

# 导入

const fs = require('fs')

import / export：

遵循 ES6 规范，支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。

写法就比较多种多样：

# 导出

export default fs

export const fs

export function readFile

export {readFile, read}

export * from 'fs'

# 导入

import fs from 'fs'

import {default as fs} from 'fs'

import * as fs from 'fs'

import {readFile} from 'fs'

import {readFile as read} from 'fs'

import fs, {readFile} from 'fs'

通过require引入基础数据类型时，属于复制该变量。

通过require引入复杂数据类型时，数据浅拷贝该对象。

出现模块之间的循环引用时，会输出已经执行的模块，而未执行的模块不输出（比较复杂）

CommonJS模块默认export的是一个对象，即使导出的是基础数据类型

import和require的区别

7、webpack4打包示例

参考文章

参考文章2

1.先创建文件目录，结构如下

2.输入初始化命令

    -- npm init -y 创建package.json文件 

3.内容如下

// index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Webpack Project</title>

</head>

<body>

    <div id='root'></div>

    <script src="main.js"></script>   <!--这是打包之后的js文件-->

</body>

</html>

// hello.js(导出一个模块)

module.exports = function() {

    let hello = document.createElement('div');

    hello.innerHTML = "Hello World!";

    return hello;

  };

//index.js(引入hello.js)

const hello = require('./hello.js');

document.querySelector("#root").appendChild(hello());

上述操作就相当于我们把hello.js模块合并到了index.js模块，之后我们打包时就只需把index.js模块打包成main.js，然后供index.html引用即可，这就是最简单的webpack打包原理。

4.打包

# 使用默认方式打包，默认入口文件是src/index.js，默认出口文件是dist/main.js

webpack --mode=development

# 指定出入口文件打包

webpack mysrc/index.js --output mydist/main.js --mode=development

// --output可简写为-o
此时入口文件是 mysrc/index.js，出口文件是mydist/main.js。
需要注意的是，这样打包，你的目录创建的也要一致，即创建mysrc、mydist等目录

5.手动打开index.html看结果

6.还可以通过配置文件启动webpack服务，具体看参考文章

五、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 

. 安装完成后在自己的工作空间里输入下面命令

    vue init webpack 项目名称

    输入命令后进入安装阶段，需要用户输入一些信息

. 切换到我们的项目目录下

    cd 到项目目录下

    npm run dev --> 启动项目

. 项目中需要使用一些.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 id="app"></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 id="app">

    <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'

    }

  },

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

七、常用命令小结

npm 包管理工具

　　管理项目 npm init -y

　　下载 npm install xxx@0.0.0

　　卸载 npm uninstall xxx

webpack 4

　　下载 npm i webpack webpack-cli

　　默认的入口文件  src/index.js

　　出口文件  dist/main.js

　　打包命令 webpack --mode development/production

vue-cli

　　下载 npm i vue-cli -g

　　创建项目 vue init webpack xxx

　　启动项目

　　　　cd xxx

　　　　npm run dev/start

　　目录结构

　　　　build

　　　　config

　　　　node_moudules

　　　　src

　　　　static

　　　　index.html

　　　　package.json

element-ui和npm、webpack、vue-cli搭建Vue项目的更多相关文章

使用&commat;vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
利用脚手架vue cli搭建vue项目
vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...
Vue CLI及其vue&period;config&period;js（一）
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本安装命令 npm install -g @vue-cli 创建项目 vue cre ...
[Vue CLI 3] vue inspect 的源码设计实现
首先,请记住: 它在新版本的脚手架项目里面非常重要它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...
vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
&commat;vue/cli 3&period;x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务需要8.9以上版本可以使用 nvm等工具来控制node版本构建于 webpack ...
Spring Boot +Vue 项目实战笔记（一）：使用 CLI 搭建 Vue&period;js 项目
前言从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...
vue 脚手架搭建新项目以及element-ui等vue组件的使用
vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

随机推荐

VS2013配置WTL91&lowbar;5321&lowbar;Final
网上关于WTL的文章,尤其是中文的文章不多,根据收集的资料整理出了VS2013安装WTL的方法. .下载.文件很小的,地址:http://sourceforge.net/projects/wtl/fi ...
[LeetCode] Largest Rectangle in Histogram
Given n non-negative integers representing the histogram's bar height where the width of each bar is ...
shell脚本实例-菜单样例
1.9.1 实例需求用户在进行Linux系统管理的过程中,经常需要用到查看进程的信息.用户的信息等常用的功能.本例针对这一需求,使用shell编程实现基本的系统管理功能.通过本程序,可以按照要求实 ...
HTML5入门十---Canvas画布实现画图（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
failed to lazily initialize a collection of role
可能修复了一个重大的偶尔发生的几乎难以察觉的并且到现在我也没能理解的bug...有时(经常)调用updateNotNullfield方法(原理是从数据库中get一个对象,然后把原对象中非空的值赋予它, ...
数据结构：HDU 2993 MAX Average Problem
MAX Average Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
解决HTML5中placeholder属性兼容性的JQuery插件
//调用方法 $(function () { $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...
007&period; 服务间通信 RPC &amp&semi; REST over HTTP(s) &amp&semi; 消息队列
服务间通信服务间通信的几种方式: RPC.REST over HTTP(s).消息队列. https://www.jianshu.com/p/2a01d4383d0b RPC https://bl ...
Linux常见企业面试题
1:只查看test.txt (100行)文件中第20行到30行的数据(企业常见面试题) 答: seq (序列) 第一种方法:head -30 test1.txt | tail -11 第二种方法:se ...
LeetCode-63&period; 不同路径 II
最近英文版的访问特别慢,转战中文吧和上一题一样,递归会超时 //63 不同路径2,递归解法 int uniquePaths2(vector<vector<int>>& ...

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

一、element-ui的简单使用

1、安装

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

二、Node.js和npm

1、什么是Node.js和npm

2、npm介绍和常用指令

三、webpack3版本

1、webpack是什么

2、安装和打包

3、entry 和 output(额外点)

四、webpack4版本(新特性)

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

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

3、默认入口文件

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

5、打包

6、export/import补充

7、webpack4打包示例

五、vue-cli 2版本

1、用vue-cli搭建项目

2、目录结构

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

4、vue-cli配置JQuery、bootstrap

六、vue-cli 3版本

七、常用命令小结

element-ui和npm、webpack、vue-cli搭建Vue项目的更多相关文章

随机推荐

相关文章

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

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