现在就出发，vue+webpack手动搭建一个测试项目

1.在码云上建一个项目

2.git clone然后新建一个dev分支

3.在dev分支中开发，npm init初始化一个项目，然后安装cnpm install vue --save；cnpm install vue-loader webpack webpack-cli css-loader vue-template-compiler --save-dev

4.新建src目录...按照上一篇文章去建剩下的就好，测试打包，成功之后进行后面的操作

5.安装cnpm install webpack-dev-server --save-dev，在package.json文件中添加脚本"dev": "webpack-dev-server --config webpack.config.js"，该脚本专门用在开发环境；而脚本"build": "webpack --config webpack.config.js"是让webpack帮我们打包js代码。

6.在添加脚本后还需要配置一下webpack.config.js，设置target: 'web'，因为我们开发的是前端项目，跑在浏览器里，所以webpack的编译目标是web平台。

7.由于配置文件要同时用在正式环境和开发环境，所以配置要根据不同的环境作出判断。如何判断？可以在package.json中设置运行脚本时添加一个环境变量，来标识当前是开发环境还是正式环境。如何添加环境变量呢？首先cnpm install cross-env --save-dev，因为在不同的平台上设置环境变量的方式也不一样，mac上可以直接写NODE_ENV=production，而windows上可能要用set方式来实现，为了不用区分平台，这里使用cross-env。所以有，

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

8.可以通过process.env.NODE_ENV来获取设置的环境变量，如果是开发环境，需要加一个webpack-dev-server的配置devServer，它是一个对象，里面设置监听的端口等，因为要启动一个服务啊

9.cnpm install html-webpack-plugin --save-dev，然后在webpack.config.js中引入，并实例化一个对象在plugins数组中

10.在使用vue等框架时，一定要用一个webpack的plugin——DefinePlugin，在这里定义process.env，可以在其他地方引用，而且webpack针对开发和正式环境打包的文件大小和功能也不同，在开发环境下会有错误提示

其他按上一篇写入口文件index.js等，然后npm run dev就可以启动项目啦

上面属于基本配置，下面开始开发测试项目

1.开发之前先安装cnpm install postcss-loader autoprefixer babel-loader babel-core babel-preset-env --save-dev

2.新建两个文件

.babelrc——注意最前面有一个.！！！给babel用的，让vue可以用jsx的语法。所以这里还要安装cnpm install babel-plugin-transform-vue-jsx --save-dev
postcss.config.js——给postcss用的，postcss是后处理css的，在其他文件（如stylus）编译得到css之后，通过postcss的一系列组件去优化css代码，这里用了autoprefixer去加浏览器前缀

3.配置webpack.config.js，加上jsx的loader

4.按照提示安装cnpm install babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx --save-dev

5.OK，现在开始写首页，上一节是没有html页面的，直接把元素创建写在了index.js里面，然后通过WebpackHtmlPlugin来解析的。这里我们新建一个index.html试试

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Business Manage System</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>

index.js

import Vue from 'vue'
import App from './App.vue'

import './assets/styles/reset.css'

// const root = document.createElement('div');
// document.body.appendChild(root);

// new Vue({
//     render: (h) => h(App)
// }).$mount(root);

new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
})

运行npm run dev报错。。。

说找不到元素#app。。。以前都是用的脚手架，直接这么写就可以，为什么呢？因为它都给你配好了呀！现在自己搭，啥都没有配置，它能关联起来就见鬼了呢。那咋办呢？这就要靠HtmlWebpackPlugin了，它是干嘛的呢？没错，这里又是英文，强迫自己理解理解。如果要用自己的html模板，需要在webpack.config.js中配置参数，指定模板位置

这样运行之后就不会说找不到元素#app，但是下面那个错还存在。。遇到问题就要多问，问度娘吧Vue 2.0 warn:You are using the runtime-only build of Vue where the template compiler is not available

哇嘎嘎，终于不报错了。。。就是这个hello有点小哈

现在就出发，vue+webpack手动搭建一个测试项目

上面属于基本配置，下面开始开发测试项目

猜你喜欢