一步一步创建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"

}

至此,环境配置结束

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容