手动搭建vue项目

本文是手动搭建一个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')

访问http://localhost:8081/：

目前为止，一个简单vue项目就搭建完成了，根据项目需要进行其他的配置即可。

注意：vue和vue-template-compiler版本兼容问题，此案例中，使用的是

  "dependencies": {

    "vue": "2.3.3",

    "vue-template-compiler": "2.3.3"

  }