不使用vue-cli脚手架构建一个项目
1.构建好项目的基本文件目录
-
新建一个文件夹
vueOne
,安装vue:npm i vue
; -
全局和本地安装
webpack
(由于已经全局安装,所以每次只需要本地安装即可),安装前初始化:npm init -y
,接着本地安装:npm i webpack --save-dev
; -
在
vueOne
文件夹下新建src
文件,在src
文件下新建index.html
(项目的首页),main.js
(项目的js入口文件),app.vue
; -
在项目的根目录下,即
vueOne
文件下,新建一个webpack.config.js
文件,是一个配置文件; -
在项目的根目录下,新建一个
.babelrc.json
的文件,是一个.json的配置文件; -
在
package.json
“scripts”中配置:"dev": "webpack-dev-server --mode development --open --port 8000 --hot"
; -
//全局安装webpack-cli:
npm install webpack-cli -g//局部安装webpack-cli
npm i webpack-cli --save-dev//安装webpack-dev-server(来实现自动打包编译的功能)
npm i webpack-dev-server -D//安装html-webpack-plugin(自动在内存中根据指定页面生成一个内存页面,并把自动打包好的js文件追加到页面中去)
npm i html-webpack-plugin -D//安装style-loader,css-loader(打包处理.css文件)
npm i style-loader css-loader -D//安装less-loader(打包处理.less文件)
npm install less-loader less -D//安装node-sass,sass-loader(处理.sass文件)
npm install sass-loader -D
npm i node-sass -D//安装url-loader filr-loader -d(处理图片的文件)
npm i url-loader file-loader - D//安装babel-loader(处理字体文件的配置项),通过Babel可以将高级语法转为低级语法
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D//默认webpack无法打包.vue文件,需要安装相关的loader
npm i vue-loader vue-template-complier -D -
项目的目录结构如下:
-
页面代码如下:
app.vue页面:
<template> <div> 这是新的项目 </div> </template> <script> export default { data(){ return {} }, methods:{} } </script> <style lang="scss" scoped> </style>
index.html页面:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <div id="app"> </div> </body> <script> </script> </html>
main.js页面
//项目的js入口文件 //导入vue import Vue from 'vue' //导入路由模块 import VueRouter from 'vue-router' //手动加载 Vue.use(VueRouter) //导入vue-resource import VueResource from 'vue-resource' //手动加载 Vue.use(VueResource) //设置全局请求地址 Vue.http.options.root = 'http://127.0.0.1:3000/'; import router from './router.js' //导入app.vue import app from './app.vue' var vm= new Vue({ el:'#app', render:c=>c(app), router })
router.js页面:
import VueRouter from 'vue-router' var router = new VueRouter({ routes:[] }) export default router
webpack.config.js:
var path = require('path') var htmlWebpackPlugin = require('html-webpack-plugin') const VueLoaderPlugin = require('vue-loader/lib/plugin') var webpack = require('webpack') module.exports = { entry:path.join(__dirname,'./src/main.js'), output:{ path:path.join(__dirname,'./dist'), filename:'bundle.js' }, plugins:[ new htmlWebpackPlugin({ template:path.join(__dirname,'./src/index.html'), filename:'index.html' }), new VueLoaderPlugin(),//高版本的vue-loader需要配置VueLoaderPlugin new webpack.DefinePlugin({//配置浏览器中vue的调试工具 'process.env':{ NODE_ENV:'"development"' } }) ], module:{ rules:[ {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, {test:/\.(jpg|gif|png|bmp|jpeg)$/,use:'url-loader?limit=57841&name=[hash:8]-[name].[ext]'}, // limit给定的值是图片的大小,单位是byte,如果我们引用的图片大于或等于给定的limit值,则不会被转为base64格式的字符串,如果图片小于给定的limit值,则会被转为base64格式的字符串 {test:/\.(ttf|woff|woff2|svg|eot)$/,use:'url-loader'}, //处理字体文件的配置项 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}, //处理.vue文件的loader {test:/\.vue$/,use:'vue-loader'} ] }, //修改vue被导入时的包的路径 resolve:{ alias:{ "vue":"vue/dist/vue.js" } } }
在package.json中的“scripts”对象中新增一个 "dev": "webpack-dev-server --mode development --open --port 8000 --hot",如下图所示: