A-A+

不使用Vue-CLI构建Vue项目

2018年12月10日 技术, 默认 暂无评论 阅读 3,959 次

最近半年,基本上主要的学习重心都是放在Vue这款框架上面,我发现我的学习过程有点颠倒,所以最近一周花了些时间尝试不使用Vue CLI来构建Vue项目。我不是个前端开发人员,只是为了兴趣和保持技术判断力而了解这款框架,所以有不对的地方还请各位看官指出。

第一步:开发必备

Node.js和NPM不可少,之前写过一篇文章,可以参考:《安装Node.js和NPM》

第二步:版本信息

Node.js:v10.11.0

NPM:6.4.1

Webpack:4.26.1

Vue:2.5.17

其它的可以参见项目中的package.json。

第三步:初始化

新建一个文件夹,我这里的路径如下:

  1. C:\demo\vue-webpack

在命令行中执行如下命令:

  1. cd C:\demo\vue-webpack
  2. npm init

如下图输入一些必须信息,如果只是本地开发使用,随便输入即可:

确定后,目标文件下就会出现package.json文件,如下图:

第四步:必需文件

新建src文件夹,增加App.vue和main.js,其中App.vue内容如下:

  1. <template>
  2.   <div id="app">
  3.     hello word!
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   name: 'app'
  9. }
  10. </script>

main.js内容如下:

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. new Vue({
  4.   el: '#app',
  5.   render: h => h(App)
  6. })

新建index.html,文件内容如下:

  1. <div id="app"></div>

文件夹内的整体结构如下:

第五步:安装依赖

在CMD命令行窗口中执行:

  1. npm install --save-dev @babel/core @babel/preset-env babel-loader babel-plugin-transform-runtime babel-runtime css-loader  html-webpack-plugin vue vue-hot-reload-api vue-html-loader vue-loader vue-style-loader vue-template-compiler webpack webpack-cli

执行完毕后,package.json中会增加以下部分:

  1. "devDependencies": {
  2.     "@babel/core""^7.2.0",
  3.     "@babel/preset-env""^7.2.0",
  4.     "babel-loader""^8.0.4",
  5.     "babel-plugin-transform-runtime""^6.23.0",
  6.     "babel-runtime""^6.26.0",
  7.     "css-loader""^2.0.0",
  8.     "html-webpack-plugin""^3.2.0",
  9.     "vue""^2.5.19",
  10.     "vue-hot-reload-api""^2.3.1",
  11.     "vue-html-loader""^1.2.4",
  12.     "vue-loader""^15.4.2",
  13.     "vue-style-loader""^4.1.2",
  14.     "vue-template-compiler""^2.5.19",
  15.     "webpack""^4.27.1",
  16.     "webpack-cli""^3.1.2"
  17.   }

第六步:增加webpack.config.js

文件内容如下:

  1. const path = require('path')
  2. const VueLoader = require('vue-loader/lib/plugin')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. module.exports = {
  5.   mode: 'development',
  6.   entry: './src/main.js',
  7.   output: {
  8.     path: path.resolve(__dirname, 'dist'),
  9.     filename: 'main.js'
  10.   },
  11.   module: {
  12.     rules: [
  13.       {test: /\.vue$/, loader: 'vue-loader'},
  14.       {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}
  15.     ]
  16.   },
  17.   plugins: [
  18.         new VueLoader(),
  19.         new HtmlWebpackPlugin({
  20.             filename: 'index.html',
  21.             template: 'index.html',
  22.             inject: 'body'
  23.         })
  24.     ],
  25.     devServer: {
  26.         contentBase: 'dist',
  27.         stats: {colors: true},
  28.         historyApiFallback: true,
  29.         inline: true
  30.   },
  31.   performance: {
  32.     hints:false
  33.   }
  34. }

第六步:其它&运行

在package.json中的"scripts"增加:

  1. "scripts": {
  2.     "test""echo \"Error: no test specified\" && exit 1",
  3.     "dev""webpack-dev-server --inline --hot --mode production",
  4.     "build""webpack"
  5.   }

增加.babelrc文件:

  1. {
  2.   "presets": ["@babel/env"]
  3. }

在CMD命令行中输入:

  1. npm run dev

第七步:运行结果

觉的不错?可以关注我的公众号↑↑↑

给我留言

Copyright © 字痕随行 保留所有权利.   Theme  Ality

用户登录

分享到: