超详细讲解和注释,Vue学习之路2

By admin in 4858美高梅 on 2019年3月25日

 ① 、检查环境是还是不是全体安装成功

4858美高梅 1

Vue作为前端三大框架之一截至到当下在github上以得到44,873颗星,足以验证其以悄然成为主流。16年2月Vue宣布了2.x本子,经过了一段时间的搜索和看官方的课程和api,才打听到2.0本子在1.0本子的基本功上做了好多调动,放弃了好多api。

新近付出八个h5的游乐,必要一个excel转json的工具,网上找了找,没有察觉符合的工具。想到自个儿后边用nodejs、express和vuejs做过多少个网站,也用过ejsExcel插件,于是本身入手做了2个。那里差不多的记录一下付出进程,

一步步教您利用webpack如何搭三个vue脚手架(超详细讲解和注释),webpackvue

Vue作为前端三大框架之一甘休到近年来在github上以博得44,873颗星,足以阐明其以悄然成为主流。16年5月Vue宣布了2.x本子,经过了一段时间的物色和看官方的学科和api,才打听到2.0版本在1.0本子的基础上做了众多调整,放任了累累api。

正文将详细介绍有关选取webpack搭二个vue脚手架的有关内容,分享出去供我们参考学习,下边话不多说了,来一块探访详细的牵线吧。

二 、创造项目

2.1.开拓dos命令窗口,使用dos命令转到项目文件夹下:

4858美高梅 2

2.2.输入创制项目命令:vue init webpack myproject1 

创建分裂的打包格局第壹种意况:

4858美高梅 3

创办不一样的打包格局第二种情形:

4858美高梅 4

2.3.起动项目,在项目目录下输入运营命令:npm start或然npm run dev

npm start运行命令示例如下:

4858美高梅 5

npm start运维命令结果示例如下:

4858美高梅 6

 

 

 npm run dev运营命令示例如下:

4858美高梅 7

npm run dev运维命令结果示例如下:

4858美高梅 8

 

正文将详细介绍有关利用webpack搭一个vue脚手架的连带内容,分享出去供大家参考学习,上面话不多说了,来共同探访详细的介绍吧。

给协调留个纪念。

一.适用人群

   1.对webpack知识有一定驾驭但不熟悉的同学.

    2.女同学!!!(233333….)

一.适用人群

   1.对webpack知识有一定领悟但不熟谙的同学.

    2.女同学!!!(233333….)

这是本类别的第贰篇博客,从新建项目始于吧。

二.目的

在和谐对webpack有特别询问的同时,也盼望能帮到一些刚接触webpack的同学.

脚手架已放上github,不想听作者啰嗦的同学能够平素去download或clone下来看哦.

脚手架里都有详细申明!

源码:  (本地下载)

以为有协助到您的同班给个star哈,也终归对本人的一种支持!

二.目的

在温馨对webpack有尤其询问的同时,也盼望能帮到一些刚接触webpack的同学.

脚手架已放上github,不想听作者啰嗦的同桌能够一直去download或clone下来看哦.

脚手架里都有详实评释!

源码: 
(本地下载.rar))

认为有救助到您的同校给个star哈,也究竟对作者的一种协助!

超详细讲解和注释,Vue学习之路2。1.亟待依照nodejs和vuejs

三.脚手架结构

├── build  构建服务和webpack配置
 |—— build.js webpack打包服务
 |—— webpack.base.conf.js webpack基本通用配置
 |—— webpack.dev.conf.js webpack开发环境配置
 |—— webpack.prod.conf.js webpack生产环境配置
├── config  构建项目不同环境的配置
├── public  项目打包文件存放目录
├── index.html  项目入口文件
├── package.json 项目配置文件
├── static  静态资源
├── .babelrc  babel配置文件
├── .gitignore  git忽略文件
├── postcss.config.js postcss配置文件
├── src  项目目录
 |—— page  页面组件目录
 |—— router  vue路由配置
 |—— store  vuex配置
 |—— App.vue  vue实例入口
 |—— main.js  项目构建入口

三.脚手架结构

├── build  构建服务和webpack配置
 |—— build.js webpack打包服务
 |—— webpack.base.conf.js webpack基本通用配置
 |—— webpack.dev.conf.js webpack开发环境配置
 |—— webpack.prod.conf.js webpack生产环境配置
├── config  构建项目不同环境的配置
├── public  项目打包文件存放目录
├── index.html  项目入口文件
├── package.json 项目配置文件
├── static  静态资源
├── .babelrc  babel配置文件
├── .gitignore  git忽略文件
├── postcss.config.js postcss配置文件
├── src  项目目录
 |—— page  页面组件目录
 |—— router  vue路由配置
 |—— store  vuex配置
 |—— App.vue  vue实例入口
 |—— main.js  项目构建入口

安装的点子那里不提了,网上找一找,教程很多。

四.配置npm scripts

四.配置npm scripts

设置好了能够看一下nodejs、vuejs和express的本子号:

4.1 生成package.json文件,配置npm scripts.

4.1.1 使用 npm init 命令,生成2个package.json文件!

npm init

4.1.2 全局安装webpack和webpack-dev-server

npm install webpack webpack-dev-server -g

4.1.3 在品种目录下安装webpack和webpack-dev-server

npm install webpack webpack-dev-server -D

4.1.4 进入package.json配置npm scripts命令

 "scripts": {
 "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
 "start": "npm run dev",
 "build": "node build/build.js"
 }

  通过配备以上命令:

  大家得以由此npm start/npm run dev在地点开始展览付出,

  scripts.dev命令解读:

  通过webpack-dev-server命令 运行build文件夹下webpack.dev.conf.js。

  也足以由此npm run build 打包项目文件实行线上安插.

  scripts.build命令解读:

  通过node命令创设build文件夹下的build.js。

  命令的布局能够依据自身脚手架的计划文件地点和称号分歧修改哦!

4.1 生成package.json文件,配置npm scripts.

4.1.1 使用 npm init 命令,生成多少个package.json文件!

npm init

4.1.2 全局安装webpack和webpack-dev-server

npm install webpack webpack-dev-server -g

4.1.3 在项目目录下安装webpack和webpack-dev-server

npm install webpack webpack-dev-server -D

4.1.4 进入package.json配置npm scripts命令

 "scripts": {
 "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
 "start": "npm run dev",
 "build": "node build/build.js"
 }

  通过安排以上命令:

  大家得以由此npm start/npm run dev在本地开始展览支付,

  scripts.dev命令解读:

  通过webpack-dev-server命令 运营build文件夹下webpack.dev.conf.js。

  也得以因此npm run build 打包项目文件进行线上配备.

  scripts.build命令解读:

  通过node命令营造build文件夹下的build.js。

  命令的配置可以依据自个儿脚手架的配备文件地点和称号差别修改哦!

4858美高梅 9

五.营造脚手架目录

校友们得以透过投机的习惯和爱护搭建自身的脚手架目录,上面讲解以上边脚手架结构为准!

五.构建脚手架目录

同学们能够透过协调的习惯和心爱搭建本身的脚手架目录,上边讲解以上面脚手架结构为准!

2.用到vuejs创制1个带webpack的档次

六.构建config/config.js

6.1 该文件珍视用以配置创设开发条件和生产条件差距化的参数.

6.2

const _path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//vue-loader基本配置
const baseVueLoaderConf = {
 //引入postcss插件
 postcss: {
 config: {
 path: _path.resolve("../")
 }
 },
 //转为require调用,让webpack处理目标资源!
 transformToRequire: {
 video: "src",
 source: "src",
 img: "src",
 image: "xlink:href"
 }
};
//vue-loader 开发环境配置
const devVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
 //loaders
 loaders: {
 css: ["vue-style-loader", "css-loader"],
 less: ["vue-style-loader", "css-loader", "postcss-loader", "less-loader"]
 },
 cssSourceMap: true
});
//vue-loader 生产环境配置
const buildVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
 //loaders
 loaders: ExtractTextPlugin.extract({
 use: ["css-loader", "postcss-loader", "less-loader"],
 fallback: "vue-style-loader"
 }),
 cssSourceMap: false
});
//开发/生产环境 配置参数!
module.exports = {
 dev: {
 publicPath: "/",
 devtoolType: "cheap-module-eval-source-map",
 vueloaderConf: devVueLoaderConf,
 host: "localhost",
 port: "1234",
 proxyTable: {}
 },
 build: {
 publicPath: "/",
 devtoolType: "source-map",
 vueloaderConf: buildVueLoaderConf,
 staticPath: "static"
 }
};

六.构建config/config.js

6.1 该文件重庆大学用于配置创设开发条件和生产条件差别化的参数.

6.2

const _path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//vue-loader基本配置
const baseVueLoaderConf = {
 //引入postcss插件
 postcss: {
 config: {
 path: _path.resolve("../")
 }
 },
 //转为require调用,让webpack处理目标资源!
 transformToRequire: {
 video: "src",
 source: "src",
 img: "src",
 image: "xlink:href"
 }
};
//vue-loader 开发环境配置
const devVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
 //loaders
 loaders: {
 css: ["vue-style-loader", "css-loader"],
 less: ["vue-style-loader", "css-loader", "postcss-loader", "less-loader"]
 },
 cssSourceMap: true
});
//vue-loader 生产环境配置
const buildVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
 //loaders
 loaders: ExtractTextPlugin.extract({
 use: ["css-loader", "postcss-loader", "less-loader"],
 fallback: "vue-style-loader"
 }),
 cssSourceMap: false
});
//开发/生产环境 配置参数!
module.exports = {
 dev: {
 publicPath: "/",
 devtoolType: "cheap-module-eval-source-map",
 vueloaderConf: devVueLoaderConf,
 host: "localhost",
 port: "1234",
 proxyTable: {}
 },
 build: {
 publicPath: "/",
 devtoolType: "source-map",
 vueloaderConf: buildVueLoaderConf,
 staticPath: "static"
 }
};

创立命令: vue init webpack developer_tools

七.构建build/webpack.base.conf.js

7.1 此文件重庆大学是webpack开发条件和转变环境的通用配置.

7.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack生产环境配置参数
const prodConfig = require("../config").build;
//拼接路径
function resolve(track) {
 return path.join(__dirname, "..", track);
}
//资源路径
function assetsPath(_path) {
 return path.join(prodConfig.staticPath, _path);
}
//webpack 基本设置
module.exports = {
 //项目入口文件->webpack从此处开始构建!
 entry: path.resolve(__dirname, "../src/main.js"),
 //配置模块如何被解析
 resolve: {
 //自动解析文件扩展名(补全文件后缀)(从左->右)
 // import hello from './hello' (!hello.js? -> !hello.vue? -> !hello.json)
 extensions: [".js", ".vue", ".json"],
 //配置别名映射
 alias: {
 // import Vue from 'vue/dist/vue.esm.js'可以写成 import Vue from 'vue'
 // 键后加上$,表示精准匹配!
 vue$: "vue/dist/vue.esm.js",
 "@": resolve("src"),
 utils: resolve("src/utils"),
 components: resolve("src/components"),
 public: resolve("public")
 }
 },
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块!)
 rules: [
 //使用babel-loader来处理src下面的所有js文件,具体babel配置在.babelrc,主要是用来转义es6
 {
 test: /\.js$/,
 use: {
 loader: "babel-loader"
 },
 include: resolve("src")
 },
 //使用url-loader(file-loader的一个再封装)对引入的图片进行编码,此处可将小于8192字节(8kb)的图片转为DataURL(base64),
 //大于limit字节的会调用file-loader进行处理!
 //图片一般发布后都是长缓存,故此处文件名加入hash做版本区分!
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: "url-loader",
 options: {
 limit: 8192,
 name: assetsPath("img/[name].[hash:8].[ext]")
 }
 }
 ]
 }
};

七.构建build/webpack.base.conf.js

7.1 此文件根本是webpack开发条件和生成环境的通用配置.

7.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack生产环境配置参数
const prodConfig = require("../config").build;
//拼接路径
function resolve(track) {
 return path.join(__dirname, "..", track);
}
//资源路径
function assetsPath(_path) {
 return path.join(prodConfig.staticPath, _path);
}
//webpack 基本设置
module.exports = {
 //项目入口文件->webpack从此处开始构建!
 entry: path.resolve(__dirname, "../src/main.js"),
 //配置模块如何被解析
 resolve: {
 //自动解析文件扩展名(补全文件后缀)(从左->右)
 // import hello from './hello' (!hello.js? -> !hello.vue? -> !hello.json)
 extensions: [".js", ".vue", ".json"],
 //配置别名映射
 alias: {
 // import Vue from 'vue/dist/vue.esm.js'可以写成 import Vue from 'vue'
 // 键后加上$,表示精准匹配!
 vue$: "vue/dist/vue.esm.js",
 "@": resolve("src"),
 utils: resolve("src/utils"),
 components: resolve("src/components"),
 public: resolve("public")
 }
 },
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块!)
 rules: [
 //使用babel-loader来处理src下面的所有js文件,具体babel配置在.babelrc,主要是用来转义es6
 {
 test: /\.js$/,
 use: {
 loader: "babel-loader"
 },
 include: resolve("src")
 },
 //使用url-loader(file-loader的一个再封装)对引入的图片进行编码,此处可将小于8192字节(8kb)的图片转为DataURL(base64),
 //大于limit字节的会调用file-loader进行处理!
 //图片一般发布后都是长缓存,故此处文件名加入hash做版本区分!
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: "url-loader",
 options: {
 limit: 8192,
 name: assetsPath("img/[name].[hash:8].[ext]")
 }
 }
 ]
 }
};

新建进度中要求填写我名称、单元测试和局部配备,按需选用就可以了,那是本身成立好的截图:

八.构建 build/webpack.dev.conf.js

8.1 该文件珍视用于构建开发条件

8.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack
const webpack = require("webpack");
//引入webpack开发环境配置参数
const devConfig = require("../config").dev;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似!
const merge = require("webpack-merge");
//一个创建html入口文件的webpack插件!
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个编译提示的webpack插件!
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
//发送系统通知的一个node模块!
const notifier = require("node-notifier");
//将webpack基本配置与开发环境配置合并!
const devConf = merge(baseConf, {
 //项目出口,webpack-dev-server 生成的包并没有写入硬盘,而是放在内存中!
 output: {
 //文件名
 filename: "[name].js",
 //html引用资源路径,在dev-server中,引用的是内存中文件!
 publicPath: devConfig.publicPath
 },
 //生成sourceMaps(方便调试)
 devtool: devConfig.devtoolType,
 //
 //启动一个express服务器,使我们可以在本地进行开发!!!
 devServer: {
 //HMR控制台log等级
 clientLogLevel: "warning",
 // 热加载
 hot: true,
 //自动刷新
 inline: true,
 //自动打开浏览器
 open: true,
 //在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
 historyApiFallback: true,
 //主机名
 host: devConfig.host,
 //端口号
 port: devConfig.port,
 //配置反向代理解决跨域
 proxy: devConfig.proxyTable,
 //为你的代码进行压缩。加快开发流程和优化的作用
 compress: true,
 // 在浏览器上全屏显示编译的errors或warnings。
 overlay: {
 errors: true,
 warnings: false
 },
 // 终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的
 quiet: true
 },
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块!)
 rules: [
 //使用vue-loader处理以vue结尾的文件!
 {
 test: /\.vue$/,
 loader: "vue-loader",
 options: devConfig.vueloaderConf
 },
 //使用vue-style-loader!css-loader!postcss-loader处理以css结尾的文件!
 {
 test: /\.css$/,
 use: [
 "vue-style-loader",
 {
 loader: "css-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "postcss-loader",
 options: {
 sourceMap: true
 }
 }
 ]
 },
 //使用vue-style-loader!css-loader!postcss-loader处理以less结尾的文件!
 {
 test: /\.less$/,
 use: [
 "vue-style-loader",
 {
 loader: "css-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "less-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "postcss-loader",
 options: {
 sourceMap: true
 }
 }
 ]
 }
 ]
 },
 plugins: [
 //开启HMR(热替换功能,替换更新部分,不重载页面!)
 new webpack.HotModuleReplacementPlugin(),
 //显示模块相对路径
 new webpack.NamedModulesPlugin(),
 //编译出错时,该插件可跳过输出,确保输出资源不会包含错误!
 // new webpack.NoEmitOnErrorsPlugin(),
 //配置html入口信息
 new HtmlWebpackPlugin({
 title: "hello,xc-cli!",
 filename: "index.html",
 template: "index.html",
 //js资源插入位置,true表示插入到body元素底部
 inject: true
 }),
 //编译提示插件
 new FriendlyErrorsPlugin({
 //编译成功提示!
 compilationSuccessInfo: {
 messages: [
 `Your application is running here: http://${devConfig.host}:${devConfig.port}`
 ]
 },
 //编译出错!
 onErrors: function(severity, errors) {
 if (severity !== "error") {
 return;
 }
 const error = errors[0];
 const filename = error.file.split("!").pop();
 //编译出错时,右下角弹出错误提示!
 notifier.notify({
 title: "xc-cli",
 message: severity + ": " + error.name,
 subtitle: filename || "",
 icon: path.join(__dirname, "xc-cli.png")
 });
 }
 })
 ]
});
module.exports = devConf;

8.3 通过创制以上文件,并下载相应的注重和开创项目进口,大家就能够经过npm
run dev在本地开发vue项目啦!!!

八.构建 build/webpack.dev.conf.js

8.1 该公文根本用以营造开发环境

8.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack
const webpack = require("webpack");
//引入webpack开发环境配置参数
const devConfig = require("../config").dev;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似!
const merge = require("webpack-merge");
//一个创建html入口文件的webpack插件!
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个编译提示的webpack插件!
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
//发送系统通知的一个node模块!
const notifier = require("node-notifier");
//将webpack基本配置与开发环境配置合并!
const devConf = merge(baseConf, {
 //项目出口,webpack-dev-server 生成的包并没有写入硬盘,而是放在内存中!
 output: {
 //文件名
 filename: "[name].js",
 //html引用资源路径,在dev-server中,引用的是内存中文件!
 publicPath: devConfig.publicPath
 },
 //生成sourceMaps(方便调试)
 devtool: devConfig.devtoolType,
 //
 //启动一个express服务器,使我们可以在本地进行开发!!!
 devServer: {
 //HMR控制台log等级
 clientLogLevel: "warning",
 // 热加载
 hot: true,
 //自动刷新
 inline: true,
 //自动打开浏览器
 open: true,
 //在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
 historyApiFallback: true,
 //主机名
 host: devConfig.host,
 //端口号
 port: devConfig.port,
 //配置反向代理解决跨域
 proxy: devConfig.proxyTable,
 //为你的代码进行压缩。加快开发流程和优化的作用
 compress: true,
 // 在浏览器上全屏显示编译的errors或warnings。
 overlay: {
 errors: true,
 warnings: false
 },
 // 终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的
 quiet: true
 },
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块!)
 rules: [
 //使用vue-loader处理以vue结尾的文件!
 {
 test: /\.vue$/,
 loader: "vue-loader",
 options: devConfig.vueloaderConf
 },
 //使用vue-style-loader!css-loader!postcss-loader处理以css结尾的文件!
 {
 test: /\.css$/,
 use: [
 "vue-style-loader",
 {
 loader: "css-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "postcss-loader",
 options: {
 sourceMap: true
 }
 }
 ]
 },
 //使用vue-style-loader!css-loader!postcss-loader处理以less结尾的文件!
 {
 test: /\.less$/,
 use: [
 "vue-style-loader",
 {
 loader: "css-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "less-loader",
 options: {
 sourceMap: true
 }
 },
 {
 loader: "postcss-loader",
 options: {
 sourceMap: true
 }
 }
 ]
 }
 ]
 },
 plugins: [
 //开启HMR(热替换功能,替换更新部分,不重载页面!)
 new webpack.HotModuleReplacementPlugin(),
 //显示模块相对路径
 new webpack.NamedModulesPlugin(),
 //编译出错时,该插件可跳过输出,确保输出资源不会包含错误!
 // new webpack.NoEmitOnErrorsPlugin(),
 //配置html入口信息
 new HtmlWebpackPlugin({
 title: "hello,xc-cli!",
 filename: "index.html",
 template: "index.html",
 //js资源插入位置,true表示插入到body元素底部
 inject: true
 }),
 //编译提示插件
 new FriendlyErrorsPlugin({
 //编译成功提示!
 compilationSuccessInfo: {
 messages: [
 `Your application is running here: http://${devConfig.host}:${devConfig.port}`
 ]
 },
 //编译出错!
 onErrors: function(severity, errors) {
 if (severity !== "error") {
 return;
 }
 const error = errors[0];
 const filename = error.file.split("!").pop();
 //编译出错时,右下角弹出错误提示!
 notifier.notify({
 title: "xc-cli",
 message: severity + ": " + error.name,
 subtitle: filename || "",
 icon: path.join(__dirname, "xc-cli.png")
 });
 }
 })
 ]
});
module.exports = devConf;

8.3 通过创造以上文件,并下载相应的借助和创造项目入口,大家就足以通过npm
run dev在地点开发vue项目啦!!!

4858美高梅 10

九.创建 build/webpack.prod.conf.js

9.1 此文件重庆大学用于营造生产条件的配置.

9.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack
const webpack = require("webpack");
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似!
const merge = require("webpack-merge");
//引入webpack生产环境配置参数
const prodConfig = require("../config").build;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一个创建html入口文件的webpack插件!
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个抽离出css的webpack插件!
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//一个压缩css的webpack插件!
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
//一个拷贝文件的webpack插件!
const CopyWebpackPlugin = require("copy-webpack-plugin");

//资源路径
function assetsPath(_path) {
 return path.join(prodConfig.staticPath, _path);
}
//将webpack基本配置与生产环境配置合并!
const prodConf = merge(baseConf, {
 //项目出口配置
 output: {
 //Build后所有文件存放的位置
 path: path.resolve(__dirname, "../public"),
 //html引用资源路径,可在此配置cdn引用地址!
 publicPath: prodConfig.publicPath,
 //文件名
 filename: assetsPath("js/[name].[chunkhash].js"),
 //用于打包require.ensure(代码分割)方法中引入的模块
 chunkFilename: assetsPath("js/[name].[chunkhash].js")
 },
 //生成sourceMaps(方便调试)
 devtool: prodConfig.devtoolType,
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块!)
 rules: [
 //使用vue-loader处理以vue结尾的文件!
 {
 test: /\.vue$/,
 loader: "vue-loader",
 options: prodConfig.vueloaderConf
 },
 {
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
  use: ["css-loader", "postcss-loader"],
  fallback: "vue-style-loader"
 })
 },
 {
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
  use: ["css-loader", "less-loader", "postcss-loader"],
  fallback: "vue-style-loader"
 })
 }
 ]
 },
 plugins: [
 //每个chunk头部添加hey,xc-cli!
 new webpack.BannerPlugin("hey,xc-cli"),
 //压缩js
 new webpack.optimize.UglifyJsPlugin({
 parallel: true,
 compress: {
 warnings: false
 }
 }),
 //分离入口引用的css,不内嵌到js bundle中!
 new ExtractTextPlugin({
 filename: assetsPath("css/[name].[contenthash].css"),
 allChunks: false
 }),
 //压缩css
 new OptimizeCSSPlugin(),
 //根据模块相对路径生成四位数hash值作为模块id
 new webpack.HashedModuleIdsPlugin(),
 //作用域提升,提升代码在浏览器执行速度
 new webpack.optimize.ModuleConcatenationPlugin(),
 //抽离公共模块,合成一个chunk,在最开始加载一次,便缓存使用,用于提升速度!
 // 1. 第三方库chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "vendor",
 minChunks: function(module) {
 //在node_modules的js文件!
 return (
  module.resource &&
  /\.js$/.test(module.resource) &&
  module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0
 );
 }
 }),
 // 2. 缓存chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "manifest",
 minChunks: Infinity
 }),
 // 3.异步 公共chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "app",
 children: true,
 // (选择所有被选 chunks 的子 chunks)
 async: true,
 // (创建一个异步 公共chunk)
 minChunks: 3
 // (在提取之前需要至少三个子 chunk 共享这个模块)
 }),
 //将整个文件复制到构建输出指定目录下
 new CopyWebpackPlugin([
 {
 from: path.resolve(__dirname, "../static"),
 to: prodConfig.staticPath,
 ignore: [".*"]
 }
 ]),
 //生成html
 new HtmlWebpackPlugin({
 filename: path.resolve(__dirname, "../public/index.html"),
 template: "index.html",
 favicon: path.resolve(__dirname, "../favicon.ico"),
 //js资源插入位置,true表示插入到body元素底部
 inject: true,
 //压缩配置
 minify: {
 //删除Html注释
 removeComments: true,
 //去除空格
 collapseWhitespace: true,
 //去除属性引号
 removeAttributeQuotes: true
 },
 //根据依赖引入chunk
 chunksSortMode: "dependency"
 })
 ]
});
module.exports = prodConf;

九.创建 build/webpack.prod.conf.js

9.1 此文件根本用来营造生产环境的配置.

9.2

"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack
const webpack = require("webpack");
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似!
const merge = require("webpack-merge");
//引入webpack生产环境配置参数
const prodConfig = require("../config").build;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一个创建html入口文件的webpack插件!
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个抽离出css的webpack插件!
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//一个压缩css的webpack插件!
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
//一个拷贝文件的webpack插件!
const CopyWebpackPlugin = require("copy-webpack-plugin");

//资源路径
function assetsPath(_path) {
 return path.join(prodConfig.staticPath, _path);
}
//将webpack基本配置与生产环境配置合并!
const prodConf = merge(baseConf, {
 //项目出口配置
 output: {
 //Build后所有文件存放的位置
 path: path.resolve(__dirname, "../public"),
 //html引用资源路径,可在此配置cdn引用地址!
 publicPath: prodConfig.publicPath,
 //文件名
 filename: assetsPath("js/[name].[chunkhash].js"),
 //用于打包require.ensure(代码分割)方法中引入的模块
 chunkFilename: assetsPath("js/[name].[chunkhash].js")
 },
 //生成sourceMaps(方便调试)
 devtool: prodConfig.devtoolType,
 module: {
 //处理模块的规则(可在此处使用不同的loader来处理模块!)
 rules: [
 //使用vue-loader处理以vue结尾的文件!
 {
 test: /\.vue$/,
 loader: "vue-loader",
 options: prodConfig.vueloaderConf
 },
 {
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
  use: ["css-loader", "postcss-loader"],
  fallback: "vue-style-loader"
 })
 },
 {
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
  use: ["css-loader", "less-loader", "postcss-loader"],
  fallback: "vue-style-loader"
 })
 }
 ]
 },
 plugins: [
 //每个chunk头部添加hey,xc-cli!
 new webpack.BannerPlugin("hey,xc-cli"),
 //压缩js
 new webpack.optimize.UglifyJsPlugin({
 parallel: true,
 compress: {
 warnings: false
 }
 }),
 //分离入口引用的css,不内嵌到js bundle中!
 new ExtractTextPlugin({
 filename: assetsPath("css/[name].[contenthash].css"),
 allChunks: false
 }),
 //压缩css
 new OptimizeCSSPlugin(),
 //根据模块相对路径生成四位数hash值作为模块id
 new webpack.HashedModuleIdsPlugin(),
 //作用域提升,提升代码在浏览器执行速度
 new webpack.optimize.ModuleConcatenationPlugin(),
 //抽离公共模块,合成一个chunk,在最开始加载一次,便缓存使用,用于提升速度!
 // 1. 第三方库chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "vendor",
 minChunks: function(module) {
 //在node_modules的js文件!
 return (
  module.resource &&
  /\.js$/.test(module.resource) &&
  module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0
 );
 }
 }),
 // 2. 缓存chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "manifest",
 minChunks: Infinity
 }),
 // 3.异步 公共chunk
 new webpack.optimize.CommonsChunkPlugin({
 name: "app",
 children: true,
 // (选择所有被选 chunks 的子 chunks)
 async: true,
 // (创建一个异步 公共chunk)
 minChunks: 3
 // (在提取之前需要至少三个子 chunk 共享这个模块)
 }),
 //将整个文件复制到构建输出指定目录下
 new CopyWebpackPlugin([
 {
 from: path.resolve(__dirname, "../static"),
 to: prodConfig.staticPath,
 ignore: [".*"]
 }
 ]),
 //生成html
 new HtmlWebpackPlugin({
 filename: path.resolve(__dirname, "../public/index.html"),
 template: "index.html",
 favicon: path.resolve(__dirname, "../favicon.ico"),
 //js资源插入位置,true表示插入到body元素底部
 inject: true,
 //压缩配置
 minify: {
 //删除Html注释
 removeComments: true,
 //去除空格
 collapseWhitespace: true,
 //去除属性引号
 removeAttributeQuotes: true
 },
 //根据依赖引入chunk
 chunksSortMode: "dependency"
 })
 ]
});
module.exports = prodConf;

 

十. 创建 build/build.js

10.1 此文件是项目打包服务,用来营造一个全量压缩包

10.2

"use strict";
//node for loading
const ora = require("ora");
// rm-rf for node
const rm = require("rimraf");
//console for node
const chalk = require("chalk");
//path for node
const path = require("path");
//webpack
const webpack = require("webpack");
//webpack production setting
const config = require("./webpack.prod.conf");
//指定删除的文件
const rmFile = path.resolve(__dirname, "../public/static");
//build start loading
const spinner = ora("building for production...");
spinner.start();
//构建全量压缩包!
rm(rmFile, function(err) {
 if (err) throw err;
 webpack(config, function(err, stats) {
 spinner.stop();
 if (err) throw err;
 process.stdout.write(
 stats.toString({
 colors: true,
 modules: false,
 children: false,
 chunks: false,
 chunkModules: false
 }) + "\n\n"
 );
 if (stats.hasErrors()) {
 console.log(chalk.red(" Build failed with errors.\n"));
 process.exit(1);
 }
 console.log(chalk.cyan(" Build complete.\n"));
 console.log(
 chalk.yellow(
 " Tip: built files are meant to be served over an HTTP server.\n" +
  " Opening index.html over file:// won't work.\n"
 )
 );
 });
});

10.3 创立好上述文件 大家就能够通过npm run
build来打包大家的花色文件并配置上线啦。

十. 创建 build/build.js

10.1 此文件是项目打包服务,用来营造叁个全量压缩包

4858美高梅,10.2

"use strict";
//node for loading
const ora = require("ora");
// rm-rf for node
const rm = require("rimraf");
//console for node
const chalk = require("chalk");
//path for node
const path = require("path");
//webpack
const webpack = require("webpack");
//webpack production setting
const config = require("./webpack.prod.conf");
//指定删除的文件
const rmFile = path.resolve(__dirname, "../public/static");
//build start loading
const spinner = ora("building for production...");
spinner.start();
//构建全量压缩包!
rm(rmFile, function(err) {
 if (err) throw err;
 webpack(config, function(err, stats) {
 spinner.stop();
 if (err) throw err;
 process.stdout.write(
 stats.toString({
 colors: true,
 modules: false,
 children: false,
 chunks: false,
 chunkModules: false
 }) + "\n\n"
 );
 if (stats.hasErrors()) {
 console.log(chalk.red(" Build failed with errors.\n"));
 process.exit(1);
 }
 console.log(chalk.cyan(" Build complete.\n"));
 console.log(
 chalk.yellow(
 " Tip: built files are meant to be served over an HTTP server.\n" +
  " Opening index.html over file:// won't work.\n"
 )
 );
 });
});

10.3 成立好上述文件 大家就能够透过npm run
build来打包大家的档次文件并配置上线啦。

3.进去项目路线,使用 npm install 安装项目正视,很要紧

十一.马到功成!

因此以上步骤,二个spa版的vue脚手架就大功告成啦!

设若对部分细节不懂的能够留言恐怕上自家的github查看

地址:  (本地下载)

十一.马到功成!

透过上述步骤,二个spa版的vue脚手架就马到成功啦!

一经对部分细节不懂的能够留言或然上本身的github查看

地址: 
(本地下载.rar))

自个儿习惯使用简写命令npm i 来安装注重

总结

上述便是那篇小说的全体内容了,希望本文的内容对大家的读书或许办事有所自然的参照学习价值,尽管有疑难咱们能够留言沟通,多谢大家对帮客之家的援助。

Vue作为前端三大框架之一截至到方今在github上以赢得44,873颗星,…

总结

如上正是那篇小说的全部内容了,希望本文的始末对大家的读书只怕工作具有一定的参照学习价值,借使有疑难大家能够留言调换,多谢大家对台本之家的支撑。

命令:npm i

您可能感兴趣的篇章:

  • webpack vue
    项目打包生成的公文,能源文件报404难题的修补方法(总括篇)
  • webpack搭建vue 项目标手续
  • Vue工程模板文件
    webpack打包配置格局
  • 详解vue-cli之webpack3营造完善涨价优化
  • 详解最新vue-cli
    2.9.1的webpack存在难题
  • webpack+vue中使用小名路径引用静态图片地址
  • vue+node+webpack环境搭建教程
  • vue+vuecli+webpack中应用mockjs模拟后端数据的言传身教
  • vue和webpack安装命令详解

安装进度须求等几分钟。安装好了的截图如下:

4858美高梅 11

 

4.施用npm run build 命令编写翻译项目

编写翻译结果如下:

4858美高梅 12

 

5.使用npm run start 命令运维品种

运作命令截图:

4858美高梅 13

那儿会活动打开运营网页,网页内容如下:

4858美高梅 14

 

 

7.使用express generator生成器生成后端服务框架

(1)使用命令:express server 引入express 

实行后的截图:

4858美高梅 15

(2)进入生成的server目录,使用npm i 命令安装express的借助

4858美高梅 16

 

(3)运转express,然后访问本机的贰仟端口,就足以见到express页面了:

运行express:

4858美高梅 17

用浏览器访问 
,就足以看看express运营页面了:

4858美高梅 18

 

 

8.安装ejsExcel模块

事先用过ejsExcel插件,作用很强大。那是它的hithub地址:

安装到支付目录里面,安装命令: npm i ejsexcel

4858美高梅 19

 

 9.使用pm2插件运转项目

(1)开发方式下,修改文件后,使用npm run dev
即可重新开动项目。可是每一次修改后都要输入1回命令,很艰辛,所以我们选用node进度管理器pm2来运转项目,那样每趟修改后,不用手动运营项目,pm2会自动执行运行命令。

pm2的介绍和动用方法得以参照那一个页面:

pm2的安装命令如下:npm i pm2 -g

安装好未来能够查看一下pm2版本:

4858美高梅 20

(2)运行项目时用到的一声令下npm run start 和 npm run dev
在品种的铺排文件package.json中有定义:

4858美高梅 21

 

能够看到,使用dev 和start 运维项目,执行的是对应的js文件。

(3)根据上面的讲述,使用pm2来运转项目:

命令:pm2 start build/dev-server.js –watch

开发银行后pm2会呈现档次的新闻(那里一度用 pm2 start server/bin/www –watch
命令运维了express,所以见到了 www的音讯):

4858美高梅 22

 

(4)测试一下修改文件后,pm2时候会活动重启项目:

新建3个名为“Pm2Test  ”的vue 组件:

4858美高梅 23

 

(5)将这一个组件参与到router中:

4858美高梅 24

 

(6)直接待上访问新加上的页面pm2:

4858美高梅 25

能够看出,pm2组件能够访问到,表达修改文件后,pm2会自动帮大家重启项目。

 10.运用webstorm调节和测试项目

编制程序进度中会平时debug,单靠打字与印刷于事无补,所以须要打断点调节和测试。那里大家配备下webstorm,以便调节和测试。

(1)按图中所示的一一,配置调节和测试音讯,然后点击OK

4858美高梅 26

(2)配置完调节和测试音信后,就足以打断点调节和测试了:

留神,运营调节和测试在此之前供给关闭pm2,不然会时有发生文件访问争辩,关闭pm2的通令如下:

pm2 stop server/bin/www –watch

 

4858美高梅 27

 

(3)那里调节和测试的是express,调节和测试配置的js文件是 server/bin/www.js
文件,配置图如下:

4858美高梅 28

 

搭建好开发条件后,就可以热情洋溢地编写项目了

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有