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有点小哈