A-A+
不使用Vue-CLI构建Vue项目
最近半年,基本上主要的学习重心都是放在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。
第三步:初始化
新建一个文件夹,我这里的路径如下:
- C:\demo\vue-webpack
在命令行中执行如下命令:
- cd C:\demo\vue-webpack
- npm init
如下图输入一些必须信息,如果只是本地开发使用,随便输入即可:
确定后,目标文件下就会出现package.json文件,如下图:
第四步:必需文件
新建src文件夹,增加App.vue和main.js,其中App.vue内容如下:
- <template>
- <div id="app">
- hello word!
- </div>
- </template>
- <script>
- export default {
- name: 'app'
- }
- </script>
main.js内容如下:
- import Vue from 'vue'
- import App from './App.vue'
- new Vue({
- el: '#app',
- render: h => h(App)
- })
新建index.html,文件内容如下:
- <div id="app"></div>
第五步:安装依赖
在CMD命令行窗口中执行:
- 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中会增加以下部分:
- "devDependencies": {
- "@babel/core": "^7.2.0",
- "@babel/preset-env": "^7.2.0",
- "babel-loader": "^8.0.4",
- "babel-plugin-transform-runtime": "^6.23.0",
- "babel-runtime": "^6.26.0",
- "css-loader": "^2.0.0",
- "html-webpack-plugin": "^3.2.0",
- "vue": "^2.5.19",
- "vue-hot-reload-api": "^2.3.1",
- "vue-html-loader": "^1.2.4",
- "vue-loader": "^15.4.2",
- "vue-style-loader": "^4.1.2",
- "vue-template-compiler": "^2.5.19",
- "webpack": "^4.27.1",
- "webpack-cli": "^3.1.2"
- }
第六步:增加webpack.config.js
文件内容如下:
- const path = require('path')
- const VueLoader = require('vue-loader/lib/plugin')
- const HtmlWebpackPlugin = require('html-webpack-plugin')
- module.exports = {
- mode: 'development',
- entry: './src/main.js',
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: 'main.js'
- },
- module: {
- rules: [
- {test: /\.vue$/, loader: 'vue-loader'},
- {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}
- ]
- },
- plugins: [
- new VueLoader(),
- new HtmlWebpackPlugin({
- filename: 'index.html',
- template: 'index.html',
- inject: 'body'
- })
- ],
- devServer: {
- contentBase: 'dist',
- stats: {colors: true},
- historyApiFallback: true,
- inline: true
- },
- performance: {
- hints:false
- }
- }
第六步:其它&运行
在package.json中的"scripts"增加:
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "dev": "webpack-dev-server --inline --hot --mode production",
- "build": "webpack"
- }
增加.babelrc文件:
- {
- "presets": ["@babel/env"]
- }
在CMD命令行中输入:
- npm run dev
