一步一步创建vue2.0项目
一步一步创建vue2.0项目
vue2.0已经发正式版本了，来研究一下吧
新建一个文件夹 vue2.0-learn 。前提是默认已经安装了nodejs和npm
npm init
按照步骤初始化package.json，这个文件提供了这个项目需要的全部信息，包括name，version，依赖包等等其他的信息。文件内容本身是一个JSON字符串，不仅仅是一个javascript对象。
然后我们得到了一个package.json文件
npm install vue --save
由于vue的默认版本已经是2.0+了，所以直接不加版本号安装，就已经是2.0+了，如果需要安装其他版本号，可以加版本好安装，例如npm install veu@1.0.0--save，--save的作用是安装之后自动加入到package.json的dependencies依赖列表里面
复杂页面必然要模块化、组件话。现在最流行的模块打包工具莫过于webpack，用过vue1.0和react之类的框架就很熟悉了
npm install webpack --save-dev
这里为什么是--save-dev是因为这种脚手架类的安装包，不需要打包到框架中去，只有开发者才会使用到。就不需要放到dependencies，而是放到devDependencies里面去
web开发自然是需要一个web服务器容器的，我们可以使用各种服务器，这里我们使用webpack-dev-server，webpack自带的server，因为和webpack结合的更紧密，也有很多更好用的功能
npm install webpack-dev-server --save-dev
es6语法已经很流行了，使用es6语法，带来很多更好的开发体验。webpack自带loader解析器，可以根据需要配置loader插件，解析es6语法，我们使用babel
npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-2 --save-dev
安装完之后，在项目根目录下面新建一个.babelrc文件，这是babel的配置文件
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}
下面开始业务代码的编写，新建一个index.html文件
新建一个src文件夹，这里面放置的是源代码
新建一个App.vue文件，这个是项目根组件，使用的是vue单文件的组织方式，代码如下：
export default {
name: 'app',
data() {
return {
msg: '我是谁！'
}
},
mounted() {
},
methods: {
},
components: {
}
}
创建main.js，这个文件是项目初始化文件。代码如下：
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
template: '',
components: { App }
})
下一步开始创建webpack文件。
一般我们的代码会区分开发环境和生产环境，开发环境不需要压缩代码，需要可以调试。
而生产环境则需要压缩，去除调试代码等等其他一系列区别的事情。
所以我们先新建两个文件：dev.js和prod.js，先创建dev.js，这是开发环境webpack配置
var path = require('path')
module.exports = {
// 项目根目录
context: path.join(__dirname, '../'),
// 项目入口
entry: [
'./src/main.js'
],
// 打包编译生成文件配置
output: {
path: path.join(__dirname, '../build'), // 编译文件存储目录
filename: 'index.js', // 编译后的入口文件
publicPath: '/build/', // devServer访问的路径前缀
chunkFilename: '[name]-[chunkhash:8].js' // 编译的分块代码可以使用文件hash作为文件名,按需加载的时候会产生
},
resolve: {
extensions: ['', '.js', '.vue'], // 引入文件的默认扩展名
alias: {
vue: 'vue/dist/vue.js' //别名配置 解决vue template 警告bug
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style!css",
include: __dirname
},
{
test: /\.less$/,
loader: "style!css!less",
include: __dirname
}
]
}
}
好了，一个简单的webpack config文件就创建好了，切换到项目根目录，运行webpack--config./webpack/dev.js，可以看到在根目录下面生成一个build文件夹，下面有个index.js文件，这个就是生成的可以浏览器运行的文件
直接修改index.html文件，添加一行
在浏览器里面打开这个页面，OK，不出意外的是可以运行的。
然而web开发我们并没有使用服务器，这会有很多限制，比如加载文件，ajax请求等等，所以我们使用了上文提到的webpack-dev-server。使用这个可以快速启动一个本地server，和webpack配合起来还有很多其他功能，比如http代理，history api等功能
var webpackDevServer = require('webpack-dev-server');
var webpack = require("webpack");
var webpackConfig = require('../webpack/dev');
var config = require('../config')
var compiler = webpack(webpackConfig);
var server = new webpackDevServer(compiler, {
stats: {
colors: true // 控制台输出带颜色
},
historyApiFallback: {
index: '/index.html' // history api 会定位到的页面
},
publicPath: webpackConfig.output.publicPath, // 编译文件的前缀
proxy: { // http代理
}
});
server.listen(config.port, err => {
if (err) {
console.log(err)
return
}
console.log(`Listening at http://${config.address}:${config.port}\n`)
});
module.exports = server
这时候直接浏览器访问http://localhost:9999，直接可以访问到我们刚刚看到的相同的页面，而且默认开始了watch功能，修改之后直接编译了，不需要在重新运行webpack了
这时候我们回过头去看webpack的dev配置，好像太过于简陋了
因为浏览器里面加载到的是编译之后的代码，所以这非常不利于我们打断点，不过幸好，现代浏览器都支持sourceMap功能，webpack配置起来也很简单
context: path.join(__dirname, '../'),
devtool: 'source-map',
加上这一句话，再重新运行一下程序我们就看到除了生成index.js文件之外，还生成了index.js.map文件，这里面就是源文件，我们可以在chrome的source下面的webpack文件夹下面看到对应我们书写的源文件了，我们在这边打断点调试了
如果有浏览器自动刷新就更好了，更新如下
var path = require('path')
var config = require('../config')
var webpack = require('webpack')
entry: [
'./src/main.js',
`webpack-dev-server/client?http://${config.address}:${config.port}`,
'webpack/hot/only-dev-server',
],
plugins: [
new webpack.HotModuleReplacementPlugin()
]
没有代码检查，怎么做团队协作啊，我们使用比较火的eslint
新建一个文件.eslintrc
{
"root": true,
"parser": "babel-eslint",
"env": {
"browser": true
},
"parserOptions": {
"sourceType": "module"
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
"extends": "standard",
// required to lint *.vue files
"plugins": [
"html"
],
// add your custom rules here
"rules": {
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
//
"space-before-function-paren": ["error", { "anonymous": "always", "named": "never" }]
}
}
修改webpack文件
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
exclude: /node_modules|assets/
},
{
test: /\.js$/,
loader: 'eslint',
exclude: /node_modules|assets/
}
]
下面就要安装我们需要的依赖包了
npm install babel-eslint eslint-plugin-html eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-friendly-formatter eslint-loader --save-dev
安装完成，测试可以了，已经开始检测代码了，看起来舒服多了，顺便把代码格式化一下吧。
还记得我们在之前的index.html里面手动插入了一行script引入了代码，这个脚本是我们通过webpack生成的，我们在webpack里面指定了名称，我们需要在html里面需要写一个一模一样的名称，同样的代码我们维护了两遍，这是不能忍的
这里我们使用到一个插件HtmlWebpackPlugin，可以自动在script标签中插入script
npm install html-webpack-plugin --save-dev
事实胜于雄辩，以上的解决方案并不适合。因为webpackDevSever生成的文件是存储在内存里面的，使用historyApiFallback定位不到，所以还是在index.html里面维护这个script的引用吧
上文提到我们需要本地开发和发布到线上去，线上服务器环境肯定是不能使用webpack-dev-server的，我们是需要生成真实的文件存储到磁盘上，发布到服务器环境上去，所以我们需要一份prod的webpack配置文件。
npm install webpack-merge --save-dev
调整之后的webpackBase.js文件如下
var path = require('path')
var webpack = require('webpack')
module.exports = {
// 项目根目录
context: path.join(__dirname, '../'),
// 项目入口
entry: [
'./src/main.js'
],
// 打包编译生成文件配置
output: {
path: path.join(__dirname, '../build'), // 编译文件存储目录
filename: 'index.js', // 编译后的入口文件
publicPath: '/build/', // devServer访问的路径前缀
chunkFilename: '[name]-[chunkhash:8].js' // 编译的分块代码可以使用文件hash作为文件名,按需加载的时候会产生
},
resolve: {
extensions: ['', '.js', '.vue'], // 引入文件的默认扩展名
alias: {
vue: 'vue/dist/vue.js' // 解决vue template 警告bug
}
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
exclude: /node_modules|assets/
},
{
test: /\.js$/,
loader: 'eslint',
exclude: /node_modules|assets/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style!css",
include: __dirname
},
{
test: /\.less$/,
loader: "style!css!less",
include: __dirname
}
]
},
plugins: []
}
dev文件如下：
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseConfig = require('./base')
module.exports = merge(baseConfig, {
devtool: 'source-map',
entry: [
...baseConfig.entry,
`webpack-dev-server/client?http://${config.address}:${config.port}`,
'webpack/hot/only-dev-server',
],
plugins: [
...baseConfig.plugins
]
})
prod.js如下
var merge = require('webpack-merge')
var baseConfig = require('./base')
var fs = require('fs')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var scriptReg = /.*<\/script>/mgi
var template = fs.readFileSync('./index.dev.html', 'utf8')
if(!template){
throw '获取模版失败'
}
var templateContent = template.replace(scriptReg, '')
module.exports = merge(baseConfig, {
plugins: [
...baseConfig.plugins,
new HtmlWebpackPlugin({
filename: '../../index.html',
hash: true,
templateContent: templateContent,
minify: false,
inject: true
})
]
})
运行webpack--config./webpack/prod.js会看到生成的文件，到时候我们只需要把这些文件上传到服务器就OK了
添加npm script的，快速运行
"scripts": {
"dev": "node ./server/index.js",
"prod": "webpack --config ./webpack/prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
至此，环境配置结束
