内容简介:上节:编写一个plugin本节开始用之前介绍的知识来搭建个vue开发环境,其实如果把基础篇的那些内容掌握,配合
上节:编写一个plugin
本节开始用之前介绍的知识来搭建个vue开发环境,其实如果把基础篇的那些内容掌握,配合 文档 ,完全可以自己搭建出来。
开始
新建一个空文件夹,并在文件夹下新建如下基本文件:
.gitignore:
node_modules dist .idea .vscode
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack</title> </head> <body> <div id="root"></div> </body> </html>
package.json:
{ "name": "webpack-train", "version": "1.0.0", "description": "webpack4", "main": "index.js", "scripts": { "dev": "webpack-dev-server" }, "keywords": ["webpack4"], "author": "Madao", "license": "ISC" }
然后新建src目录,并在src下新建main.js(入口)和App.vue(根组件):
src/main.js:
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#root', render: h => h(App) });
src/App.vue:
<template> <div> <h1>hello {{msg}}</h1> </div> </template> <script> export default { name: 'App', data() { return { msg: 'webpack' } } } </script>
在根目录下新建webpack.config.js:
const HTMLPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode: 'development', entry: './src/main.js', // 起node服务 devServer: { port: 4200 }, module: { rules: [{ // 识别.vue文件 test: /\.vue$/, loader: 'vue-loader', }, { // 用于识别vue文件中的script块 test: /\.js$/, loader: 'babel-loader', }, { // 用于识别vue文件中的style块 test: /\.less$/, /* vue-style-loader基于style-loader https://www.npmjs.com/package/vue-style-loader */ use: ['vue-style-loader', 'css-loader', 'less-loader'] }, { test: /\.(gif|jpg|jpeg|png|svg|ttf|woff)$/, loader: 'url-loader' }] }, plugins: [ new HTMLPlugin({ template: './index.html' }), // 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块 new VueLoaderPlugin() ] };
新建babel.config.js:
const presets = ["@babel/env"]; module.exports = { presets };
这是基本的开发环境配置,先安装下依赖看能否跑起来:
npm i webpack webpack-cli webpack-dev-server vue-loader vue-style-loader vue-template-compiler @babel/core @babel/preset-env babel-loader css-loader file-loader url-loader html-webpack-plugin less less-loader vue-loader -D
npm i vue
安装完成后npm run dev, 打开浏览器localhost:4200:
ok,开发环境大概的配置就完成了。
开启热更新,安装vue-router和vuex
热更新:修改webpack.config.js:
// 省略 const webpack = require('webpack'); devServer: { port: 4200, hot: true }, // 省略 plugins: [ new HTMLPlugin({ template: './index.html' }), // 将定义过的其它规则复制并应用到 .vue 文件里相应语言的块 new VueLoaderPlugin(), new webpack.HotModuleReplacementPlugin() ] // 省略
安装vue-router和vuex:
npm i vue-router vuex
修改src/main.js:
import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' import VueRouter from 'vue-router' Vue.use(VueRouter) Vue.use(Vuex) new Vue({ el: '#root', render: h => h(App) });
然后重新npm run dev即可。
下节:手动配置vue-cli下(待更新)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 苹果:今年晚些时候将推全新手动安装iOS 12配置描述文件流程
- webpack4.29.x成神之路(二十三) 手动配置vue-cli下
- webpack4.29.x成神之路(二十四) 手动配置vue-cli——集成typescript
- 手动升级Coreos版本
- mongodb操作的模块手动封装
- 越狱手记:手动编译安装 Electra
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Linux集群体系结构
Alex Vrenios / 马朝晖 / 机械工业出版社 / 2003-1 / 38.00元
本书对Linux集群体系结构的硬件环境组建与其软件开发作了深入细致的介绍。通过阅读本书,可以对Linux集群体系结构有深入的认识,掌握并了解如何设计和构造集群计算机。本书使你了解到开发项目可能遇到的问题,并掌握测试和调整分布式算法。 本书适合计算机系统集成技术人员、管理人员和计算机科研人员作为参考。一起来看看 《Linux集群体系结构》 这本书的介绍吧!