不借助vue-cli脚手架从零开始构建vue项目
2020-04-12 本文已影响0人
易冷zzz
vue-cli脚手架用着方便，配合vue的语法代码写的很快，但是时间久了很多基础的东西却渐渐遗忘，虽然工具是用来提高生产力的，但知其所以然才能更好的使用工具。
一、准备工作
创建目录结构，所有文件内容为空。
image.png
二、初始化package.json，安装项目用到的包
2.1快速初始化package.json
npm init -y
2.2 安装依赖
主要有以下依赖：
vue
vue-router
babel-loader
babel-core
vue-loader
node-sass
sass-loader
css-loader
style-loader
webpack
webpack-cli
webpack-dev-server
html-webpack-plugin
vue-template-compiler
npm install vue vue-router -S
npm install babel-loader babel-core vue-loader node-sass sass-loader css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-template-compiler -D
2.3配置项目启动执行脚本命令
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js"
},
最终完整的package.json内容如下，你也可以直接复制package.json然后执行npm install
{
"name": "createVueTest",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.1.6"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.2",
"html-webpack-plugin": "^4.2.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"vue-loader": "^15.9.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
三、配置入口文件等
//index.html 在body元素下增加id为app的div元素，用于挂载vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
//App.vue 增加路由出口
<template>
<router-view></router-view>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>
<style>
</style>
//main.js 引入vue vue-router 样式 构建vue实例等
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assts/style/common.scss'
new Vue({
el: '#app',
router,
render: h => h(App)
})
四、构建webpack.config.js配置文件
//webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
const config = {
//入口文件
entry: path.join(__dirname, 'src/main.js'),
//输出文件
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
plugins:[
new VueLoaderPlugin(),
//生成html页面并导入bundle.js，如果配置了filename则以项目中filename指定的html为模版
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
})
]
}
module.exports = config
五、配置路由
// /src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'main',
title: '重定向',
redirect: '/home'
},
{
path: '/home',
name: 'name',
title: '首页',
component: () => import ('../views/home.vue')
},
{
path: '/content',
name: 'content',
title: '内容',
component: () => import ('../views/content.vue')
}
]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next)=>{
console.log(to)
next()
})
export default router
六、其他工作
至此，项目已经完成大部分工作，只需要处理一下细节问题方便查看效果，具体如下：
1.在home.vue content.vue增加文字内容以查看路由是否正常
<template>
<div>这是content组件内容</div>
</template>
<template>
<div>这是content组件内容</div>
</template>
2.在common.scss文件中写一些样式，已查看sass是否编译成功
body{
color: blue;
background: #F4F4F5;
}
3.最后再npm install安装一遍依赖文件避免遗漏
4.npm run dev启动项目
具体效果如下：
查看源码请移步我的码云,如果对你有帮助记得给个star哦
