手动搭建vue项目
本文是手动搭建一个vue项目。第一步:创建一个空的文件夹app。第二步:在app文件里面,执行npm init初始化项目,初始化过程会有项目名和描述的相关信息,一路按enter键即可,完成后会生成一个package.js文件。这文件会记录项目的名称和相关依赖等。第三步:执行npm i –save vue安装vue,执行npm i—save-dev webpack安装webpack。第四步:在app
本文是手动搭建一个vue项目。项目地址:GitHub - xiaoli0510/vueApp
第一步:创建一个空的文件夹app。
第二步:在app文件里面,执行npm init初始化项目,初始化过程会有项目名和描述的相关信息,一路按enter键即可,完成后会生成一个package.js文件。这文件会记录项目的名称和相关依赖等。
第三步:执行npm i –save vue安装vue,执行npm i—save-dev webpack安装webpack。
第四步:在app根目录,创建src文件夹,src文件夹里面创建main.js和App.vue。根目录创建webpack.config.js。
App.vue是一个vue组件,App.vue:
<template>
<div>{{txt}}</div>
</template>
<script>
export default {
name:'App',
data(){
return {
txt:'这是App.vue'
}
}
}
</script>
<style>
div{
color:red;
}
</style>
Main.js是入口文件,进行vue的实例化和挂载,main.js:
import Vue from 'vue'
import App from './App.vue'
const dom = document.createElement('div')
document.body.append(dom)
new Vue({
render:(h)=>h(App)
}).$mount(dom)
Webpack.config.js文件配置入口文件,输出文件,webpack.config.js:
const path = require('path')
module.exports = {
mode:'development',
entry:path.resolve(__dirname,'./src/main.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
}
第五步:在package.json文件中在的script属性中添加build打包一行,package.json:
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.11"
},
"devDependencies": {
"webpack": "^4.43.0"
}
}
第六步:设置完成后,执行npm run build,报错
这是因为缺失vue-loader来处理.vue文件。执行npm i –save-dev vue-loader vue-template-compiler来安装vue-loader(依赖vue-template-compiler),随后在webpack.config.js里面配置vue-loader:
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
}
]
}
再次执行打包命令npm run build,报错
这是因为缺失style-loader css-loader. npm i –save-dev style-loader css-loader,随后配置在webpack.config.js配置loader:
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
}
再执行打包命令行npm run build,报错:
这是因为vue-loader在15.*之后的版本都是vue-loader的使用都需要伴生VueLoaderPlugin,随后在webpack.config.js中引入VueLoaderPlugin并配置插件:
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode:'development',
entry:path.resolve(__dirname,'./src/main.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
},
plugins:[
new VueLoaderPlugin()
]
}
再执行打包命令行npm run build,成功了,显示:
在文件夹中会自动生成dist文件夹:
第七步:区分环境。需要cross-env插件,执行npm i –save-dev cross-env。
Package.json中命令行改为:
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=production webpack-dev-server"
Webpack.config.js添加变量:
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const isDev = process.env.NODE_ENV=='development'
const config = {
mode:'development',
entry:path.resolve(__dirname,'./src/main.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
},
plugins:[
new VueLoaderPlugin()
]
}
if(isDev){
config.devtool='cheap-module-eval-source-map'//生成map文件
config.devServer={
port:8081,
host:'0.0.0.0'//使用本机ip也可以访问
}
}
module.exports = config
第八步:前端项目缺html,需要引入html-webpack-plugin。npm i –save-dev html-webpack-plugin。该插件会构建一个html并自动注入打包后的js文件。
在webpack.config.js中引入html-webpack-plugin并进行配置。
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const isDev = process.env.NODE_ENV=='development'
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
mode:'development',
entry:path.resolve(__dirname,'./src/main.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html',
inject: 'body'
})
]
}
if(isDev){
config.devtool='cheap-module-eval-source-map'//生成map文件
config.devServer={
port:8081,
host:'0.0.0.0'//使用本机ip也可以访问
}
}
module.exports = config
在src根文件夹添加index.html模板文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>app title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
再执行npm run dev成功,访问http://localhost:8081/:
至今,简单版的单页面应用已经成功了。
第九步:配置一个简单的路由。
先在src根目录创建views文件夹,views文件夹里面创建A.vue、B.vue、4004.vue。
A.vue:
<template>
<div>{{txt}}</div>
</template>
<script>
export default{
name:"A",
data(){
return {
txt:'A组件'
}
}
}
</script>
B.vue:
<template>
<div>{{txt}}</div>
</template>
<script>
export default{
name:"B",
data(){
return {
txt:'B组件'
}
}
}
</script>
404.vue:
<template>
<div>{{txt}}</div>
</template>
<script>
export default{
name:"notFind",
data(){
return {
txt:'404组件'
}
}
}
</script>
执行npm i -save vue-router安装路由后,在src根目录创建router文件夹,router文件夹里面创建index.js路由,index.js引入vur-router中间组件,并使用组件:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path:'/',
name:'Home',
redirect:'/a'
},
{
path:'/a',
name:'A',
component:()=>import('../views/A.vue')
},{
path:'/b',
name:'B',
component:()=>import('../views/B.vue')
},{
path:'*',
name:'notFind',
component:()=>import('../views/404.vue')
}
]
const router = new Router({
mode:'history',
routes
})
export default router
最后在main.js中把router实例注入到vue实例根实例中:
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
目前为止,一个简单vue项目就搭建完成了,根据项目需要进行其他的配置即可。
注意:vue和vue-template-compiler版本兼容问题,此案例中,使用的是
"dependencies": {
"vue": "2.3.3",
"vue-template-compiler": "2.3.3"
}
更多推荐
所有评论(0)