Skip to content

Commit 1537b53

Browse files
huang303513huang303513
committed
vuejs基础入门
1 parent 0594bb7 commit 1537b53

25 files changed

+641
-1
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ ajax相关学习参考韩顺平的视频学习、讲的非常详细。具体源
99
[Webpack傻瓜式指南系列](https://github.com/vikingmute/webpack-for-fools)</br>
1010
[Webpack中文指南](http://wiki.jikexueyuan.com/project/webpack-handbook/)</br>
1111
[前端构建工具gulp入门教程](https://segmentfault.com/a/1190000000372547)</br>
12-
12+
[vuejs入门基础](http://www.imooc.com/learn/694)</br>
1313
##iOS原生代码与html5交互
1414
OC与JS交互Demos里面是这个相关的源码<br/>
1515
[WKWebView与Js实战(OC版)](http://www.henishuo.com/wkwebview-js-h5-oc/?utm_source=tuicool&utm_medium=referral)<br/>

‎vuejs入门基础/my-second-vue-project/.babelrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": ["es2015", "stage-2"],
3+
"plugins": ["transform-runtime"],
4+
"comments": false
5+
}

‎vuejs入门基础/my-second-vue-project/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎vuejs入门基础/my-second-vue-project/.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
build/*.js
2+
config/*.js

‎vuejs入门基础/my-second-vue-project/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
selenium-debug.log
6+
test/unit/coverage
7+
test/e2e/reports

‎vuejs入门基础/my-second-vue-project/README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# my-second-vue-project
2+
3+
> A Vue.js project
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# build for production with minification
15+
npm run build
16+
17+
# run unit tests
18+
npm run unit
19+
20+
# run e2e tests
21+
npm run e2e
22+
23+
# run all tests
24+
npm test
25+
```
26+
27+
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎vuejs入门基础/my-second-vue-project/build/build.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// https://github.com/shelljs/shelljs
2+
require('shelljs/global')
3+
env.NODE_ENV = 'production'
4+
5+
var path = require('path')
6+
var config = require('../config')
7+
var ora = require('ora')
8+
var webpack = require('webpack')
9+
var webpackConfig = require('./webpack.prod.conf')
10+
11+
console.log(
12+
' Tip:\n' +
13+
' Built files are meant to be served over an HTTP server.\n' +
14+
' Opening index.html over file:// won\'t work.\n'
15+
)
16+
17+
var spinner = ora('building for production...')
18+
spinner.start()
19+
20+
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
21+
rm('-rf', assetsPath)
22+
mkdir('-p', assetsPath)
23+
cp('-R', 'static/', assetsPath)
24+
25+
webpack(webpackConfig, function (err, stats) {
26+
spinner.stop()
27+
if (err) throw err
28+
process.stdout.write(stats.toString({
29+
colors: true,
30+
modules: false,
31+
children: false,
32+
chunks: false,
33+
chunkModules: false
34+
}) + '\n')
35+
})

‎vuejs入门基础/my-second-vue-project/build/dev-client.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable */
2+
require('eventsource-polyfill')
3+
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
4+
5+
hotClient.subscribe(function (event) {
6+
if (event.action === 'reload') {
7+
window.location.reload()
8+
}
9+
})

‎vuejs入门基础/my-second-vue-project/build/dev-server.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
var path = require('path')
2+
var express = require('express')
3+
var webpack = require('webpack')
4+
var config = require('../config')
5+
var proxyMiddleware = require('http-proxy-middleware')
6+
var webpackConfig = process.env.NODE_ENV === 'testing'
7+
? require('./webpack.prod.conf')
8+
: require('./webpack.dev.conf')
9+
10+
// default port where dev server listens for incoming traffic
11+
var port = process.env.PORT || config.dev.port
12+
// Define HTTP proxies to your custom API backend
13+
// https://github.com/chimurai/http-proxy-middleware
14+
var proxyTable = config.dev.proxyTable
15+
16+
var app = express()
17+
var compiler = webpack(webpackConfig)
18+
19+
var devMiddleware = require('webpack-dev-middleware')(compiler, {
20+
publicPath: webpackConfig.output.publicPath,
21+
stats: {
22+
colors: true,
23+
chunks: false
24+
}
25+
})
26+
27+
var hotMiddleware = require('webpack-hot-middleware')(compiler)
28+
// force page reload when html-webpack-plugin template changes
29+
compiler.plugin('compilation', function (compilation) {
30+
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
31+
hotMiddleware.publish({ action: 'reload' })
32+
cb()
33+
})
34+
})
35+
36+
// proxy api requests
37+
Object.keys(proxyTable).forEach(function (context) {
38+
var options = proxyTable[context]
39+
if (typeof options === 'string') {
40+
options = { target: options }
41+
}
42+
app.use(proxyMiddleware(context, options))
43+
})
44+
45+
// handle fallback for HTML5 history API
46+
app.use(require('connect-history-api-fallback')())
47+
48+
// serve webpack bundle output
49+
app.use(devMiddleware)
50+
51+
// enable hot-reload and state-preserving
52+
// compilation error display
53+
app.use(hotMiddleware)
54+
55+
// serve pure static assets
56+
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
57+
app.use(staticPath, express.static('./static'))
58+
59+
module.exports = app.listen(port, function (err) {
60+
if (err) {
61+
console.log(err)
62+
return
63+
}
64+
console.log('Listening at http://localhost:' + port + '\n')
65+
})

‎vuejs入门基础/my-second-vue-project/build/utils.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
var path = require('path')
2+
var config = require('../config')
3+
var ExtractTextPlugin = require('extract-text-webpack-plugin')
4+
5+
exports.assetsPath = function (_path) {
6+
var assetsSubDirectory = process.env.NODE_ENV === 'production'
7+
? config.build.assetsSubDirectory
8+
: config.dev.assetsSubDirectory
9+
return path.posix.join(assetsSubDirectory, _path)
10+
}
11+
12+
exports.cssLoaders = function (options) {
13+
options = options || {}
14+
// generate loader string to be used with extract text plugin
15+
function generateLoaders (loaders) {
16+
var sourceLoader = loaders.map(function (loader) {
17+
var extraParamChar
18+
if (/\?/.test(loader)) {
19+
loader = loader.replace(/\?/, '-loader?')
20+
extraParamChar = '&'
21+
} else {
22+
loader = loader + '-loader'
23+
extraParamChar = '?'
24+
}
25+
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
26+
}).join('!')
27+
28+
if (options.extract) {
29+
return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
30+
} else {
31+
return ['vue-style-loader', sourceLoader].join('!')
32+
}
33+
}
34+
35+
// http://vuejs.github.io/vue-loader/configurations/extract-css.html
36+
return {
37+
css: generateLoaders(['css']),
38+
postcss: generateLoaders(['css']),
39+
less: generateLoaders(['css', 'less']),
40+
sass: generateLoaders(['css', 'sass?indentedSyntax']),
41+
scss: generateLoaders(['css', 'sass']),
42+
stylus: generateLoaders(['css', 'stylus']),
43+
styl: generateLoaders(['css', 'stylus'])
44+
}
45+
}
46+
47+
// Generate loaders for standalone style files (outside of .vue)
48+
exports.styleLoaders = function (options) {
49+
var output = []
50+
var loaders = exports.cssLoaders(options)
51+
for (var extension in loaders) {
52+
var loader = loaders[extension]
53+
output.push({
54+
test: new RegExp('\\.' + extension + '$'),
55+
loader: loader
56+
})
57+
}
58+
return output
59+
}

‎vuejs入门基础/my-second-vue-project/build/webpack.base.conf.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
var path = require('path')
2+
var config = require('../config')
3+
var utils = require('./utils')
4+
var projectRoot = path.resolve(__dirname, '../')
5+
6+
module.exports = {
7+
entry: {
8+
app: './src/main.js'
9+
},
10+
output: {
11+
path: config.build.assetsRoot,
12+
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
13+
filename: '[name].js'
14+
},
15+
resolve: {
16+
extensions: ['', '.js', '.vue'],
17+
fallback: [path.join(__dirname, '../node_modules')],
18+
alias: {
19+
'vue': 'vue/dist/vue.common.js',
20+
'src': path.resolve(__dirname, '../src'),
21+
'assets': path.resolve(__dirname, '../src/assets'),
22+
'components': path.resolve(__dirname, '../src/components')
23+
}
24+
},
25+
resolveLoader: {
26+
fallback: [path.join(__dirname, '../node_modules')]
27+
},
28+
module: {
29+
loaders: [
30+
{
31+
test: /\.vue$/,
32+
loader: 'vue'
33+
},
34+
{
35+
test: /\.js$/,
36+
loader: 'babel',
37+
include: projectRoot,
38+
exclude: /node_modules/
39+
},
40+
{
41+
test: /\.json$/,
42+
loader: 'json'
43+
},
44+
{
45+
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
46+
loader: 'url',
47+
query: {
48+
limit: 10000,
49+
name: utils.assetsPath('img/[name].[hash:7].[ext]')
50+
}
51+
},
52+
{
53+
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
54+
loader: 'url',
55+
query: {
56+
limit: 10000,
57+
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
58+
}
59+
}
60+
]
61+
},
62+
vue: {
63+
loaders: utils.cssLoaders(),
64+
postcss: [
65+
require('autoprefixer')({
66+
browsers: ['last 2 versions']
67+
})
68+
]
69+
}
70+
}

‎vuejs入门基础/my-second-vue-project/build/webpack.dev.conf.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
var config = require('../config')
2+
var webpack = require('webpack')
3+
var merge = require('webpack-merge')
4+
var utils = require('./utils')
5+
var baseWebpackConfig = require('./webpack.base.conf')
6+
var HtmlWebpackPlugin = require('html-webpack-plugin')
7+
8+
// add hot-reload related code to entry chunks
9+
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
10+
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
11+
})
12+
13+
module.exports = merge(baseWebpackConfig, {
14+
module: {
15+
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
16+
},
17+
// eval-source-map is faster for development
18+
devtool: '#eval-source-map',
19+
plugins: [
20+
new webpack.DefinePlugin({
21+
'process.env': config.dev.env
22+
}),
23+
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
24+
new webpack.optimize.OccurenceOrderPlugin(),
25+
new webpack.HotModuleReplacementPlugin(),
26+
new webpack.NoErrorsPlugin(),
27+
// https://github.com/ampedandwired/html-webpack-plugin
28+
new HtmlWebpackPlugin({
29+
filename: 'index.html',
30+
template: 'index.html',
31+
inject: true
32+
})
33+
]
34+
})

0 commit comments

Comments
 (0)