vuex写一个cnode的脚手架,router基本选用

作者: 韦德国际1946国际网址  发布:2019-05-28

先是在大前提vue-cli已经设置好的景观下,并且cnpm install后(官方网址使用的是npm,但那边推荐用cnpm比npm快而且npm有的时候候会有出现堵塞的景观),这里有个小提醒就是有关是还是不是开启eslint,那几个是对你写的代码实行标准化的二个工具,对Yu Gang接触的新手们提出关闭,不然代码写的不合乎它的标准你的编写翻译器会平昔报错,如下图

目前欣赏上了markdown的书写格局,所以博客直接写在github上来,点击查阅

github地址(内含简单例子)

github地址(内含轻巧例子)

图片 1

选择手艺栈

  • webpack(^2.6.1)

  • webpack-dev-server(^2.4.5)

  • vue(^2.3.3)

  • vuex(^2.3.1)

  • vue-router(^2.5.3)

  • vue-loader(^12.2.1)

  • eslint(^3.19.0)

内需上学的学问

vue.js 
vuex 
vue-router 
vue-loader 
webpack2 
eslint 

剧情繁多,尤其是webpack二学科,官方脚手架vue-cli就算特别完整完备,可是修改起来依然挺花时间,于是自个儿参照网络的素材和事先做过的项目用到的创设筑工程具地去写了贰个简练vue项目脚手架。适用于多页面spa形式的业务场景(每种模块都以三个spa)。比较轻易,主要就是四个webpack.config.js文件,未有说极其地去划分成分webpack.dev.config.js、webpack.prov.config.js等等。上面是漫天webpack.config.js文件代码:

  1 const { resolve } = require('path')
  2 const webpack = require('webpack')
  3 const HtmlWebpackPlugin = require('html-webpack-plugin')
  4 const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 const glob = require('glob')
  6 
  7 module.exports = (options = {}) => {
  8     // 配置文件,根据 run script不同的config参数来调用不同config
  9     const config = require('./config/'   (process.env.npm_config_config || options.config || 'dev'))
 10     // 遍历入口文件,这里入口文件与模板文件名字保持一致,保证能同时合成HtmlWebpackPlugin数组和入口文件数组
 11     const entries = glob.sync('./src/modules/*.js')
 12     const entryJsList = {}
 13     const entryHtmlList = []
 14     for (const path of entries) {
 15         const chunkName = path.slice('./src/modules/'.length, -'.js'.length)
 16         entryJsList[chunkName] = path
 17         entryHtmlList.push(new HtmlWebpackPlugin({
 18             template: path.replace('.js', '.html'),
 19             filename: 'modules/'   chunkName   '.html',
 20             chunks: ['manifest', 'vendor', chunkName]
 21         }))
 22     }
 23     // 处理开发环境和生产环境ExtractTextPlugin的使用情况
 24     function cssLoaders(loader, opt) {
 25         const loaders = loader.split('!')
 26         const opts = opt || {}
 27         if (options.dev) {
 28             if (opts.extract) {
 29                 return loader
 30             } else {
 31                 return loaders
 32             }
 33         } else {
 34             const fallbackLoader = loaders.shift()
 35             return ExtractTextPlugin.extract({
 36                 use: loaders,
 37                 fallback: fallbackLoader
 38             })
 39         }
 40     }
 41 
 42     const webpackObj = {
 43         entry: Object.assign({
 44             vendor: ['vue', 'vuex', 'vue-router']
 45         }, entryJsList),
 46         // 文件内容生成哈希值chunkhash,使用hash会更新所有文件
 47         output: {
 48             path: resolve(__dirname, 'dist'),
 49             filename: options.dev ? 'static/js/[name].js' : 'static/js/[name].[chunkhash].js',
 50             chunkFilename: 'static/js/[id].[chunkhash].js',
 51             publicPath: config.publicPath
 52         },
 53 
 54         externals: {
 55 
 56         },
 57 
 58         module: {
 59             rules: [
 60                 // 只 lint 本地 *.vue 文件,需要安装eslint-plugin-html,并配置eslintConfig(package.json)
 61                 {
 62                     enforce: 'pre',
 63                     test: /.vue$/,
 64                     loader: 'eslint-loader',
 65                     exclude: /node_modules/
 66                 },
 67                 /*
 68                     http://blog.guowenfh.com/2016/08/07/ESLint-Rules/
 69                     http://eslint.cn/docs/user-guide/configuring
 70                     [eslint资料]
 71                  */
 72                 {
 73                     test: /.js$/,
 74                     exclude: /node_modules/,
 75                     use: ['babel-loader', 'eslint-loader']
 76                 },
 77                 // 需要安装vue-template-compiler,不然编译报错
 78                 {
 79                     test: /.vue$/,
 80                     loader: 'vue-loader',
 81                     options: {
 82                         loaders: {
 83                             sass: cssLoaders('vue-style-loader!css-loader!sass-loader', { extract: true })
 84                         }
 85                     }
 86                 },
 87                 {
 88                     // 需要有相应的css-loader,因为第三方库可能会有文件
 89                     // (如:element-ui) css在node_moudle
 90                     // 生产环境才需要code抽离,不然的话,会使热重载失效
 91                     test: /.css$/,
 92                     use: cssLoaders('style-loader!css-loader')
 93                 },
 94                 {
 95                     test: /.(scss|sass)$/,
 96                     use: cssLoaders('style-loader!css-loader!sass-loader')
 97                 },
 98                 {
 99                     test: /.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(?. )?$/,
100                     use: [
101                         {
102                             loader: 'url-loader',
103                             options: {
104                                 limit: 10000,
105                                 name: 'static/imgs/[name].[ext]?[hash]'
106                             }
107                         }
108                     ]
109                 }
110             ]
111         },
112 
113         plugins: [
114             ...entryHtmlList,
115             // 抽离css
116             new ExtractTextPlugin({
117                 filename: 'static/css/[name].[chunkhash].css',
118                 allChunks: true
119             }),
120             // 抽离公共代码
121             new webpack.optimize.CommonsChunkPlugin({
122                 names: ['vendor', 'manifest']
123             }),
124             // 定义全局常量
125             // cli命令行使用process.env.NODE_ENV不如期望效果,使用不了,所以需要使用DefinePlugin插件定义,定义形式'"development"'或JSON.stringify('development')
126             new webpack.DefinePlugin({
127                 'process.env': {
128                     NODE_ENV: options.dev ? JSON.stringify('development') : JSON.stringify('production')
129                 }
130             })
131 
132         ],
133 
134         resolve: {
135             // require时省略的扩展名,不再需要强制转入一个空字符串,如:require('module') 不需要module.js
136             extensions: ['.js', '.json', '.vue', '.scss', '.css'],
137             // require路径简化
138             alias: {
139                 '~': resolve(__dirname, 'src'),
140                 // Vue 最早会打包生成三个文件,一个是 runtime only 的文件 vue.common.js,一个是 compiler only 的文件 compiler.js,一个是 runtime   compiler 的文件 vue.js。
141                 // vue.js = vue.common.js   compiler.js,默认package.json的main是指向vue.common.js,而template 属性的使用一定要用compiler.js,因此需要在alias改变vue指向
142                 vue: 'vue/dist/vue'
143             },
144             // 指定import从哪个目录开始查找
145             modules: [
146                 resolve(__dirname, 'src'),
147                 'node_modules'
148             ]
149         },
150         // 开启http服务,publicPath => 需要与Output保持一致 || proxy => 反向代理 || port => 端口号
151         devServer: config.devServer ? {
152             port: config.devServer.port,
153             proxy: config.devServer.proxy,
154             publicPath: config.publicPath,
155             stats: { colors: true }
156         } : undefined,
157         // 屏蔽文件超过限制大小的warn
158         performance: {
159             hints: options.dev ? false : 'warning'
160         },
161         // 生成devtool,保证在浏览器可以看到源代码,生产环境设为false
162         devtool: 'inline-source-map'
163     }
164 
165     if (!options.dev) {
166         webpackObj.devtool = false
167         webpackObj.plugins = (webpackObj.plugins || []).concat([
168             // 压缩js
169             new webpack.optimize.UglifyJsPlugin({
170                 // webpack2,默认为true,可以不用设置
171                 compress: {
172                     warnings: false
173                 }
174             }),
175             //  压缩 loaders
176             new webpack.LoaderOptionsPlugin({
177                 minimize: true
178             })
179         ])
180     }
181 
182     return webpackObj
183 }

 

应用手艺栈

  • webpack(^2.6.1)

  • webpack-dev-server(^2.4.5)

  • vue(^2.3.3)

  • vuex(^2.3.1)

  • vue-router(^2.5.3)

  • vue-loader(^12.2.1)

  • eslint(^3.19.0)

急需上学的文化

vue.js 
vuex写一个cnode的脚手架,router基本选用。vuex 
vue-router 
vue-loader 
webpack2 
eslint 

剧情相当的多,特别是webpack2课程,官方脚手架vue-cli即使极其完整完备,但是修改起来依旧挺花时间,于是自个儿参照网络的资料和后面做过的项目用到的营造工具地去写了3个轻易vue项目脚手架。适用于多页面spa格局的事务场景(种种模块都是3个spa)。比较轻松,首要正是三个webpack.config.js文件,未有说极度地去划分成分webpack.dev.config.js、webpack.prov.config.js等等。下边是成套webpack.config.js文件代码:

  1 const { resolve } = require('path')
  2 const webpack = require('webpack')
  3 const HtmlWebpackPlugin = require('html-webpack-plugin')
  4 const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 const glob = require('glob')
  6 
  7 module.exports = (options = {}) => {
  8     // 配置文件,根据 run script不同的config参数来调用不同config
  9     const config = require('./config/'   (process.env.npm_config_config || options.config || 'dev'))
 10     // 遍历入口文件,这里入口文件与模板文件名字保持一致,保证能同时合成HtmlWebpackPlugin数组和入口文件数组
 11     const entries = glob.sync('./src/modules/*.js')
 12     const entryJsList = {}
 13     const entryHtmlList = []
 14     for (const path of entries) {
 15         const chunkName = path.slice('./src/modules/'.length, -'.js'.length)
 16         entryJsList[chunkName] = path
 17         entryHtmlList.push(new HtmlWebpackPlugin({
 18             template: path.replace('.js', '.html'),
 19             filename: 'modules/'   chunkName   '.html',
 20             chunks: ['manifest', 'vendor', chunkName]
 21         }))
 22     }
 23     // 处理开发环境和生产环境ExtractTextPlugin的使用情况
 24     function cssLoaders(loader, opt) {
 25         const loaders = loader.split('!')
 26         const opts = opt || {}
 27         if (options.dev) {
 28             if (opts.extract) {
 29                 return loader
 30             } else {
 31                 return loaders
 32             }
 33         } else {
 34             const fallbackLoader = loaders.shift()
 35             return ExtractTextPlugin.extract({
 36                 use: loaders,
 37                 fallback: fallbackLoader
 38             })
 39         }
 40     }
 41 
 42     const webpackObj = {
 43         entry: Object.assign({
 44             vendor: ['vue', 'vuex', 'vue-router']
 45         }, entryJsList),
 46         // 文件内容生成哈希值chunkhash,使用hash会更新所有文件
 47         output: {
 48             path: resolve(__dirname, 'dist'),
 49             filename: options.dev ? 'static/js/[name].js' : 'static/js/[name].[chunkhash].js',
 50             chunkFilename: 'static/js/[id].[chunkhash].js',
 51             publicPath: config.publicPath
 52         },
 53 
 54         externals: {
 55 
 56         },
 57 
 58         module: {
 59             rules: [
 60                 // 只 lint 本地 *.vue 文件,需要安装eslint-plugin-html,并配置eslintConfig(package.json)
 61                 {
 62                     enforce: 'pre',
 63                     test: /.vue$/,
 64                     loader: 'eslint-loader',
 65                     exclude: /node_modules/
 66                 },
 67                 /*
 68                     http://blog.guowenfh.com/2016/08/07/ESLint-Rules/
 69                     http://eslint.cn/docs/user-guide/configuring
 70                     [eslint资料]
 71                  */
 72                 {
 73                     test: /.js$/,
 74                     exclude: /node_modules/,
 75                     use: ['babel-loader', 'eslint-loader']
 76                 },
 77                 // 需要安装vue-template-compiler,不然编译报错
 78                 {
 79                     test: /.vue$/,
 80                     loader: 'vue-loader',
 81                     options: {
 82                         loaders: {
 83                             sass: cssLoaders('vue-style-loader!css-loader!sass-loader', { extract: true })
 84                         }
 85                     }
 86                 },
 87                 {
 88                     // 需要有相应的css-loader,因为第三方库可能会有文件
 89                     // (如:element-ui) css在node_moudle
 90                     // 生产环境才需要code抽离,不然的话,会使热重载失效
 91                     test: /.css$/,
 92                     use: cssLoaders('style-loader!css-loader')
 93                 },
 94                 {
 95                     test: /.(scss|sass)$/,
 96                     use: cssLoaders('style-loader!css-loader!sass-loader')
 97                 },
 98                 {
 99                     test: /.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(?. )?$/,
100                     use: [
101                         {
102                             loader: 'url-loader',
103                             options: {
104                                 limit: 10000,
105                                 name: 'static/imgs/[name].[ext]?[hash]'
106                             }
107                         }
108                     ]
109                 }
110             ]
111         },
112 
113         plugins: [
114             ...entryHtmlList,
115             // 抽离css
116             new ExtractTextPlugin({
117                 filename: 'static/css/[name].[chunkhash].css',
118                 allChunks: true
119             }),
120             // 抽离公共代码
121             new webpack.optimize.CommonsChunkPlugin({
122                 names: ['vendor', 'manifest']
123             }),
124             // 定义全局常量
125             // cli命令行使用process.env.NODE_ENV不如期望效果,使用不了,所以需要使用DefinePlugin插件定义,定义形式'"development"'或JSON.stringify('development')
126             new webpack.DefinePlugin({
127                 'process.env': {
128                     NODE_ENV: options.dev ? JSON.stringify('development') : JSON.stringify('production')
129                 }
130             })
131 
132         ],
133 
134         resolve: {
135             // require时省略的扩展名,不再需要强制转入一个空字符串,如:require('module') 不需要module.js
136             extensions: ['.js', '.json', '.vue', '.scss', '.css'],
137             // require路径简化
138             alias: {
139                 '~': resolve(__dirname, 'src'),
140                 // Vue 最早会打包生成三个文件,一个是 runtime only 的文件 vue.common.js,一个是 compiler only 的文件 compiler.js,一个是 runtime   compiler 的文件 vue.js。
141                 // vue.js = vue.common.js   compiler.js,默认package.json的main是指向vue.common.js,而template 属性的使用一定要用compiler.js,因此需要在alias改变vue指向
142                 vue: 'vue/dist/vue'
143             },
144             // 指定import从哪个目录开始查找
145             modules: [
146                 resolve(__dirname, 'src'),
147                 'node_modules'
148             ]
149         },
150         // 开启http服务,publicPath => 需要与Output保持一致 || proxy => 反向代理 || port => 端口号
151         devServer: config.devServer ? {
152             port: config.devServer.port,
153             proxy: config.devServer.proxy,
154             publicPath: config.publicPath,
155             stats: { colors: true }
156         } : undefined,
157         // 屏蔽文件超过限制大小的warn
158         performance: {
159             hints: options.dev ? false : 'warning'
160         },
161         // 生成devtool,保证在浏览器可以看到源代码,生产环境设为false
162         devtool: 'inline-source-map'
163     }
164 
165     if (!options.dev) {
166         webpackObj.devtool = false
167         webpackObj.plugins = (webpackObj.plugins || []).concat([
168             // 压缩js
169             new webpack.optimize.UglifyJsPlugin({
170                 // webpack2,默认为true,可以不用设置
171                 compress: {
172                     warnings: false
173                 }
174             }),
175             //  压缩 loaders
176             new webpack.LoaderOptionsPlugin({
177                 minimize: true
178             })
179         ])
180     }
181 
182     return webpackObj
183 }

 

安装好脚手架之后就如那样

地点的代码对于各种配置项都有注释表明,这里有几点需求注意的:

地点的代码对于每一种配置项都有注释表明,这里有几点必要留意的:

图片 2

一. webpack.config.js导出的是2个function

之前项目的webpack.config.js是以目的方式export的,如下

1 module.exports = {
2     entry: ...,
3     output: {
4         ...
5     },
6     ...
7 }

而后天倒出来的是贰个function,如下:

1 module.exports = (options = {}) => { 
2     return {
3         entry: ...,
4         output: {
5             ...
6         },
7         ...
8     }
9 }

那样的话,function会在实施webpack CLI的时候获得webpack的参数,通过options传进function,看一下package.json:

1     "local": "npm run dev --config=local",
2     "dev": "webpack-dev-server -d --hot --inline --env.dev --env.config dev",
3     "build": "rimraf dist && webpack -p --env.config prod" //rimraf清空dist目录

对于local命令,我们推行的是dev一声令下,可是在结尾面会--config=local,那是布署,那样我们得以由此process.env.npm_config_config获取到,而对于dev命令,对于--env XXX,我们便得以在function获取option.config= 'dev' 和 option.dev= true的值,特别有利!以此便得以同步参数来加载分歧的安排文件了。对于-d-p不领悟的话,能够这里查看,很详细!

1     // 配置文件,根据 run script不同的config参数来调用不同config
2     const config = require('./config/'   (process.env.npm_config_config || options.config || 'dev'))

一. webpack.config.js导出的是一个function

之前项目的webpack.config.js是以指标格局export的,如下

1 module.exports = {
2     entry: ...,
3     output: {
4         ...
5     },
6     ...
7 }

而将来倒出来的是八个function,如下:

1 module.exports = (options = {}) => { 
2     return {
3         entry: ...,
4         output: {
5             ...
6         },
7         ...
8     }
9 }

那样的话,function会在奉行webpack CLI的时候获得webpack的参数,通过options传进function,看一下package.json:

1     "local": "npm run dev --config=local",
2     "dev": "webpack-dev-server -d --hot --inline --env.dev --env.config dev",
3     "build": "rimraf dist && webpack -p --env.config prod" //rimraf清空dist目录

对于local命令,咱们施行的是dev一声令下,可是在终极面会--config=local,那是布局,那样大家得以经过process.env.npm_config_config获取到,而对于dev命令,对于--env XXX,大家便能够在function获取option.config= 'dev' 和 option.dev= true的值,特别有益!以此便能够协同参数来加载分化的布局文件了。对于-d-p不领会的话,能够这里查看,很详细!

1     // 配置文件,根据 run script不同的config参数来调用不同config
2     const config = require('./config/'   (process.env.npm_config_config || options.config || 'dev'))

终端输入npm run dev,然后张开localhost:8080就能够知见项目周转啦

二. modules放置模板文件、入口文件、对应模块的vue文件

将进口文件和模板文件放到modules目录(名字保持1致),webpack文件会经过glob读取modules目录,遍历生成入口文件对象和模板文件数组,如下:

 1     const entries = glob.sync('./src/modules/*.js')
 2     const entryJsList = {}
 3     const entryHtmlList = []
 4     for (const path of entries) {
 5         const chunkName = path.slice('./src/modules/'.length, -'.js'.length)
 6         entryJsList[chunkName] = path
 7         entryHtmlList.push(new HtmlWebpackPlugin({
 8             template: path.replace('.js', '.html'),
 9             filename: 'modules/'   chunkName   '.html',
10             chunks: ['manifest', 'vendor', chunkName]
11         }))
12     }

对于HtmlWebpackPlugin插件中多少个布局项的意味是,template:模板路线,filename:文件名称,这里为了分裂开来模板文件作者是停放在dist/modules文件夹中,而相应的编写翻译打包好的js、img(对于图片大家是采取file-loader、url-loader进行抽离,对于那三个不是很通晓的,能够看这里)、css笔者也是会放在dist/下对应目录的,这样目录会相比较明晰。chunks:钦命插入文件中的chunk,前面我们会生成manifest文件、公共vendor、以及对应生成的jscss(名称同样)

二. modules放置模板文件、入口文件、对应模块的vue文件

将进口文件和模板文件放到modules目录(名字保持1致),webpack文件会透过glob读取modules目录,遍历生成入口文件对象和模板文件数组,如下:

 1     const entries = glob.sync('./src/modules/*.js')
 2     const entryJsList = {}
 3     const entryHtmlList = []
 4     for (const path of entries) {
 5         const chunkName = path.slice('./src/modules/'.length, -'.js'.length)
 6         entryJsList[chunkName] = path
 7         entryHtmlList.push(new HtmlWebpackPlugin({
 8             template: path.replace('.js', '.html'),
 9             filename: 'modules/'   chunkName   '.html',
10             chunks: ['manifest', 'vendor', chunkName]
11         }))
12     }

对于HtmlWebpackPlugin插件中多少个布局项的意趣是,template:模板路线,filename:文件名称,这里为了差别开来模板文件笔者是放置在dist/modules文件夹中,而相应的编写翻译打包好的js、img(对于图片大家是运用file-loader、url-loader进行抽离,对于那八个不是很领会的,能够看这里)、css小编也是会放在dist/下对应目录的,那样目录会相比较清楚。chunks:钦赐插入文件中的chunk,前边我们会生成manifest文件、公共vendor、以及相应生成的jscss(名称一样)

图片 3

三. 甩卖开荒条件和生产境况ExtractTextPlugin的行使状态

支出条件,无需把css进行抽离,要以style插入html文件中,能够很好贯彻热替换 生产条件,要求把css实行抽离合并,如下(根据options.dev区分开辟和生育):

 1     // 处理开发环境和生产环境ExtractTextPlugin的使用情况
 2     function cssLoaders(loader, opt) {
 3         const loaders = loader.split('!')
 4         const opts = opt || {}
 5         if (options.dev) {
 6             if (opts.extract) {
 7                 return loader
 8             } else {
 9                 return loaders
10             }
11         } else {
12             const fallbackLoader = loaders.shift()
13             return ExtractTextPlugin.extract({
14                 use: loaders,
15                 fallback: fallbackLoader
16             })
17         }
18     }
19     ...
20     // 使用情况
21     // 注意:需要安装vue-template-compiler,不然编译会报错
22     {
23         test: /.vue$/,
24         loader: 'vue-loader',
25         options: {
26             loaders: {
27                 sass: cssLoaders('vue-style-loader!css-loader!sass-loader', { extract: true })
28             }
29         }
30     },
31     ...
32     {
33         test: /.(scss|sass)$/,
34         use: cssLoaders('style-loader!css-loader!sass-loader')
35     }

再使用ExtractTextPlugin合并抽离到static/css/目录

三. 甩卖开垦条件和生产意况ExtractTextPlugin的利用状态

支出条件,无需把css进行抽离,要以style插入html文件中,能够很好贯彻热替换 生产条件,需求把css实行抽离合并,如下(依据options.dev区分开拓和生育):

 1     // 处理开发环境和生产环境ExtractTextPlugin的使用情况
 2     function cssLoaders(loader, opt) {
 3         const loaders = loader.split('!')
 4         const opts = opt || {}
 5         if (options.dev) {
 6             if (opts.extract) {
 7                 return loader
 8             } else {
 9                 return loaders
10             }
11         } else {
12             const fallbackLoader = loaders.shift()
13             return ExtractTextPlugin.extract({
14                 use: loaders,
15                 fallback: fallbackLoader
16             })
17         }
18     }
19     ...
20     // 使用情况
21     // 注意:需要安装vue-template-compiler,不然编译会报错
22     {
23         test: /.vue$/,
24         loader: 'vue-loader',
25         options: {
26             loaders: {
27                 sass: cssLoaders('vue-style-loader!css-loader!sass-loader', { extract: true })
28             }
29         }
30     },
31     ...
32     {
33         test: /.(scss|sass)$/,
34         use: cssLoaders('style-loader!css-loader!sass-loader')
35     }

再使用ExtractTextPlugin合并抽离到static/css/目录

大概深入分析一下多少个比较常用的文本把,如下图

四. 定义全局常量

cli命令行(webpack -p)使用process.env.NODE_ENV不及期望效果,使用持续,所以须求利用DefinePlugin插件定义,定义形式'"development"'或JSON.stringify(process.env.NODE_ENV),笔者动用那样的写法'development',结果报错(针对webpack2),查找了刹那间网络资料,它是那般讲的,能够去看一下,设置如下:

1     new webpack.DefinePlugin({
2         'process.env': {
3             NODE_ENV: options.dev ? JSON.stringify('development') : JSON.stringify('production')
4         }
5     })

4. 定义全局常量

cli命令行(webpack -p)使用process.env.NODE_ENV不及期望效果,使用持续,所以须要运用DefinePlugin插件定义,定义格局'"development"'或JSON.stringify(process.env.NODE_ENV),小编利用那样的写法'development',结果报错(针对webpack二),查找了一下网络资料,它是这么讲的,能够去看一下,设置如下:

1     new webpack.DefinePlugin({
2         'process.env': {
3             NODE_ENV: options.dev ? JSON.stringify('development') : JSON.stringify('production')
4         }
5     })

图片 4

伍. 用到eslint勘误代码标准

经过eslint来检查代码的标准性,通过定义一套配置项,来标准代码,那样多人搭档,写出来的代码也会相比较优雅,不佳的地方是,正是计划项太多,某个暗中认可项设置大家无需,不过确是四处限制大家,需求通过布署屏蔽掉,能够因此.eslintrc文本或然package.json的eslintConfig,还应该有别的方式,能够到中文网看,这里本身用的是package.json格局,如下:

 1     ...
 2   "eslintConfig": {
 3     "parser": "babel-eslint",
 4     "extends": "enough",
 5     "env": {
 6       "browser": true,
 7       "node": true,
 8       "commonjs": true,
 9       "es6": true
10     },
11     "rules": {
12       "linebreak-style": 0,
13       "indent": [2, 4],
14       "no-unused-vars": 0,
15       "no-console": 0
16     },
17     "plugins": [
18       "html"
19     ]
20   },
21   ...

我们还亟需设置 npm install eslint eslint-config-enough eslint-loader --save-dev,eslint-config-enough是所谓的配置文件,那样package.json的内容本领起效,可是不当当是如此,对应编辑器也亟需安装相应的插件,sublime text 叁须要设置SublimeLinter、SublimeLinter-contrib-eslint插件。对于具备规则的详解,能够去看官网,也能够去这里看,很详细!
鉴于大家使用的是vue-loader,自然大家是可望能对.vue文件eslint,那么必要安装eslint-plugin-html,在package.json中开始展览布局。然后对应webpack配置:

1     {
2         enforce: 'pre',
3         test: /.vue$/,
4         loader: 'eslint-loader',
5         exclude: /node_modules/
6     }

咱俩会意识webpack v一和v二之间会有1对例外,比方webpack一对于预先加载器管理的进行是这么的,

1   module: {
2     preLoaders: [
3       {
4         test: /.js$/,
5         loader: "eslint-loader"
6       }
7     ]
8   }

越来越多的两样足以到中文网看,很详细,不做拓展。

伍. 应用eslint立异代码标准

通过eslint来检查代码的标准性,通过定义1套配置项,来标准代码,那样多少人同盟,写出来的代码也会比较优雅,不佳的地点是,正是安插项太多,有个别私下认可项设置咱们不须要,然则确是各方限制大家,须要通过计划屏蔽掉,能够透过.eslintrc文本只怕package.json的eslintConfig,还应该有任何办法,能够到中文网看,这里小编用的是package.json格局,如下:

 1     ...
 2   "eslintConfig": {
 3     "parser": "babel-eslint",
 4     "extends": "enough",
 5     "env": {
 6       "browser": true,
 7       "node": true,
 8       "commonjs": true,
 9       "es6": true
10     },
11     "rules": {
12       "linebreak-style": 0,
13       "indent": [2, 4],
14       "no-unused-vars": 0,
15       "no-console": 0
16     },
17     "plugins": [
18       "html"
19     ]
20   },
21   ...

咱俩还索要安装 npm install eslint eslint-config-enough eslint-loader --save-dev,eslint-config-enough是所谓的布局文件,那样package.json的原委技艺起效,可是不当当是那样,对应编辑器也需求设置相应的插件,sublime text 三供给安装SublimeLinter、SublimeLinter-contrib-eslint插件。对于有所条条框框的详解,能够去看官网,也得以去这里看,很详细!
由于我们运用的是vue-loader,自然大家是愿意能对.vue文件eslint,那么要求安装eslint-plugin-html,在package.json中进行安排。然后对应webpack配置:

1     {
2         enforce: 'pre',
3         test: /.vue$/,
4         loader: 'eslint-loader',
5         exclude: /node_modules/
6     }

作者们会开掘webpack v一和v二之间会有部分不等,譬喻webpack一对此预先加载器管理的推行是那样的,

1   module: {
2     preLoaders: [
3       {
4         test: /.js$/,
5         loader: "eslint-loader"
6       }
7     ]
8   }

越多的不等足以到中文网看,很详细,不做拓展。

1.build:重要用来配置构建项目以及webpack

6. alias vue指向难点

1     ...
2     alias: {
3         vue: 'vue/dist/vue'
4     },
5     ...

Vue 最早会打包生成四个文本,二个是 runtime only 的文本 vue.common.js,3个是 compiler only 的文本 compiler.js,一个是 runtime compiler 的公文 vue.js。vue.js = vue.common.js compiler.js,默许package.json的main是指向vue.common.js,而template 属性的施用一定要用compiler.js,因而需求在alias改换vue指向

6. alias vue指向难点

1     ...
2     alias: {
3         vue: 'vue/dist/vue'
4     },
5     ...

Vue 最早会打包生成五个文件,2个是 runtime only 的文书 vue.common.js,3个是 compiler only 的文书 compiler.js,七个是 runtime compiler 的文本 vue.js。vue.js = vue.common.js compiler.js,暗中同意package.json的main是指向vue.common.js,而template 属性的使用一定要用compiler.js,由此需求在alias改换vue指向

2.config:项目开销配置

7. devServer的使用

之前的项目中使用的是用express运维http服务,webpack-dev-middleware+webpack-hot-middleware,这里会用到compiler+compilation,这么些是webpack的编写翻译器和编译进程的有的知识,也不是很懂,后续要去做做作业,应该能够强化对webpack运营机制的通晓。那样做的话,认为复杂繁多,对于webpack二.0 devServer就像成效更有力越发周全了,所以一直利用就足以了。如下:

 1     devServer: {
 2         port: 8080, //端口号
 3         proxy: { //方向代理 /api/auth/ => http://api.example.dev
 4             '/api/auth/': {
 5                 target: 'http://api.example.dev',
 6                 changeOrigin: true,
 7                 pathRewrite: { '^/api': '' }
 8             }
 9         },
10         publicPath: config.publicPath,
11         stats: { colors: true }
12     }
13     //changeOrigin会修改HTTP请求头中的Host为target的域名, 这里会被改为api.example.dev
14     //pathRewrite用来改写URL, 这里我们把/api前缀去掉,直接使用/auth/请求

webpack 二装进实战任课得拾贰分好,非常的厉害。能够去看一下,一定会有所收获!

7. devServer的使用

之前的项目中运用的是用express运维http服务,webpack-dev-middleware+webpack-hot-middleware,这里会用到compiler+compilation,这些是webpack的编译器和编写翻译进度的1对学问,也不是很懂,后续要去做做作业,应该能够变本加厉对webpack运营机制的了然。那样做的话,以为复杂许多,对于webpack二.0 devServer就像功能更加强劲特别全面了,所以直接选拔就可以了。如下:

 1     devServer: {
 2         port: 8080, //端口号
 3         proxy: { //方向代理 /api/auth/ => http://api.example.dev
 4             '/api/auth/': {
 5                 target: 'http://api.example.dev',
 6                 changeOrigin: true,
 7                 pathRewrite: { '^/api': '' }
 8             }
 9         },
10         publicPath: config.publicPath,
11         stats: { colors: true }
12     }
13     //changeOrigin会修改HTTP请求头中的Host为target的域名, 这里会被改为api.example.dev
14     //pathRewrite用来改写URL, 这里我们把/api前缀去掉,直接使用/auth/请求

webpack 2包裹实战教学得相当好,非常厉害。能够去看一下,一定会全部收获!

三.npm也许cnpm所下载的借助包

捌. 热重载原理

webpack中文网,讲的还算清楚,可是也许太笨,看起来仍旧云里雾里的,似懂非懂的,补补课,好雅观看。

八. 热重载原理

webpack中文网,讲的还算清楚,然而大概太笨,看起来依旧云里雾里的,似懂非懂的,补补课,好赏心悦目看。

四.你的源代码

9. localtunnel的使用

Localtunnel 是一个得以让内网服务器暴露到公英特网的开源项目,使用能够看这里,

1 $ npm install -g localtunnel
2 $ lt --port 8080
3 your url is: https://uhhzexcifv.localtunnel.me

那样的话,能够把我们的地面网址一时性地展露到公网,能够对网址做一些线上线下相比,详细内容能够去打听一下localtunnel,这里讲的是经过地点配置,访问https://uhhzexcifv.localtunnel.me,未有完毕优秀效果,现身了Invalid Host header的不当,因为devServer缺乏三个布局disableHostCheck: true,这样的三个配置,多数文书档案下边都不曾表明,字面上面包车型地铁意味不要去检查Host,那样设置,便得以绕过那1层核实,设置的安排项在optionsSchema.json中,issue可以看这里

9. localtunnel的使用

Localtunnel 是二个得以让内网服务器暴光到公网络的开源项目,使用能够看这里,

1 $ npm install -g localtunnel
2 $ lt --port 8080
3 your url is: https://uhhzexcifv.localtunnel.me

那样的话,能够把大家的地面网址暂且性地展露到公网,能够对网址做一些线上线下相比较,详细内容能够去打听一下localtunnel,这里讲的是经过地点配置,访问https://uhhzexcifv.localtunnel.me,未有达到完美效果,出现了Invalid Host header的荒谬,因为devServer贫乏三个计划disableHostCheck: true,这样的二个配置,很多文书档案上边都未有表达,字面上边的意味不要去检查Host,那样设置,便得以绕过那壹层核查,设置的铺排项在optionsSchema.json中,issue可以看这里

5.静态文书夹,webpack打包时不会卷入这里文件

10. 升级webpack3.0

webpack三.0到家向下包容,增添了些新特征,如限制进步,法力注释 ”Magic Comments(目前不领悟怎么用),进级过程境遇Uncaught TypeError: Cannot read property 'call' of undefined的荒唐,最后在HtmlWebpackPlugin插件配置了chunksSortMode: 'dependency'解决了。

小说内容或然会更新,能够关怀github

10. 升级webpack3.0

webpack3.0健全向下包容,增加了些新特色,如限制升高,法力注释 ”Magic Comments(权且不明白怎么用),晋级历程蒙受Uncaught TypeError: Cannot read property 'call' of undefined的错误,最终在HtmlWebpackPlugin插件配置了chunksSortMode: 'dependency'解决了。

小说内容或许会更新,能够关切github

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:vuex写一个cnode的脚手架,router基本选用

关键词: JavaScript 其他 vue vuex vue-loader