webpack + vue2 构建vue项目骨架

时间 2019-11-11

标签 webpack vue2 vue 构建项目骨架繁體版

原文原文链接

　　前端项目打包工具webpack与前端开发框架vue，算是如今先后端分离后很是流行的技术了，今天主要讲的是使用webpack和vue2构建一个先后端分离项目的基本骨架。虽然使用vue-cli脚手架能够帮咱们搭建好一个项目骨架，可是了解原理我以为仍是很重要的，因此这篇文章主要就写webpack与vue构建一个基础项目。前提是已经安装了nodejs。javascript

整个项目须要经过npm安装的依赖

css ： style-loader、css-loader、sass-loader、node-sasscss

js：babel-core 、babel-loader、babel-preset-es2015html

webpack：webpack、webpack-dev-server前端

vue：vuer 、vue-loade、vue-html-loader、vue-template-compilervue

新建一个项目的目录

咱们首先须要新建一个目录myApp用来放咱们的项目，在终端里面进入这个项目，而后开始初始化项目。java

初始化项目

$ npm init

初始化项目的时候，若是没有特别须要，直接按“回车键”就能够。项目初始化完成后，就会生成一个packge.json文件主要存放项目依赖目录和配置项目启动命令。node

安装依赖

$ npm i style-loader --D

使用npm安装依赖的时候，咱们会在最后加上“--D”，由于加“--D”后会在packge.json里面留上记录。若是咱们将项目在其余系统打开时，会发现开发的时候经过npm安装的依赖不能用了，这是由于存在系统兼容性。而若是开发项目的时候安装依赖加上“--D”，项目里面的node_modules就不须要拷贝过去，而打开项目前，咱们只须要经过npm安装全部依赖就能够了。webpack

$ npm i

配置webpack.config.js文件

webpack全部的配置都在webpack.config.js文件里面，因此初始化项目后，咱们须要新建一个webpack.config.js文件而后配置。因为上次已经专门写过webpack的基本配置，这儿就不重复了，直接贴上个人配置代码：es6

module.exports = {
  entry: './src/main.js',
  output:{
    path: __dirname + '/dist/',
    filename: 'bundle.js'
  },
  devtool:'source-map',
  devServer:{
    // 主要改变项目的根目录
    contentBase: __dirname + '/dist/',
    port:8080,
    inline:true
  },
  module:{
    loaders:[
      {test:/\.css$/,loader :'style-loader!css-loader'},
      {test:/\.js$/, loader:'babel-loader',exclude:/node_modules/},
      { test: /\.vue$/, loader: 'vue-loader' }
    ]
  },
  //vue文件想要解析必需要要加上这句才能成功
  resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
}

配置package.json

package.json里面须要配置的主要时项目启动命令，一个开发模式的start和打包项目build。web

启动项目

$ npm start

打包项目

$ npm run build

整个项目的目录

src：咱们开发的源文件都放在这个目录里面

components：用来放全部的组件

styles：存放全部的样式文件

utils：存放全部须要本身写的方法函数

app.vue：全部的vue文件的入口文件

main.js：整个项目的js入口文件

index.html：这个文件能够放在真个项目的根目录myApp里面，也能够放在webpack打包的生成的目录dist里面，若是是放在根目录则webpack.config.js里面的contentBase: __dirname ，若是在dist里面则contentBase: __dirname + '/dist/'。主要改变项目的服务根目录的位置，就是咱们localhos:8080打开时浏览器显示的目录。（通过测试放在打包生成的dist目录会好些，主要在开发模式能够实现实时更新。这个可能不太准，后期再测试后进行修改）

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>webpack+vue</title>
</head>
<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>
</html>

main.js文件代码

//引入vue框架
//import是es6的写法，其实和var Vue = require('vue')是相同的意义
import Vue from 'vue';
//引入App.vue文件，这个文件也是vue全部组件的入口，咱们的项目就是将这个文件追加到index.html文件里面
import App from './App.vue';
new Vue({
  el:'#app',
  components: {App},
//主要目点就是将App追加到“#app”里面去
  render: h => h(App)
})

App.vue文件代码

<template>
   <div>Hello VueJS!</div>   
</template>
<script>
  export default{
     name:"app"
  }
</script>

到这儿整个项目基本上就完成了基本的结构，在浏览器输入：localhost:8080，就能够看到显示：