资讯专栏INFORMATION COLUMN

一步一步创建vue2.0项目(一)

ranwu / 1659人阅读

摘要:一步一步创建项目已经发正式版本了,来研究一下吧新建一个文件夹。文件内容本身是一个字符串,不仅仅是一个对象。代码如下下一步开始创建文件。

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



  
    
    vue-demo
  
  
    

新建一个src文件夹,这里面放置的是源代码

新建一个App.vue文件,这个是项目根组件,使用的是vue单文件的组织方式,代码如下:







创建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}
`)
});

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 = /.*/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"
}

至此,环境配置结束

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82629.html

相关文章

发表评论

0条评论

最新活动
阅读需要支付1元查看
<