使用ES6+vue+elementui+webpack搭建简单项目

62 阅读 0 评论 41 点赞

我是靠谱客的博主能干百合，最近开发中收集的这篇文章主要介绍使用ES6+vue+elementui+webpack搭建简单项目，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

相关技术：
1.vue2.0

2.webpack

3.element

4.vue-router

vue2.0环境搭建：
1.检查本地是否安装node：node -v

如果没有安装从node官网上下载相应的node，安装成功即可。

2.检查本地npm版本：npm -v，如果版本太低可以通过：npm install -g npm进行升级

3.全局安装webpack：npm install webpack -g

4.安装vue脚手架：npm install vue-cli -g

5.新建空文件夹，根据模板创建项目：

vue init webpack-simple 工程名字<工程名字不能用中文>

或者创建 vue1.0 的项目： vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

会有一些初始化的设置，如下输入:

Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

Project name (vue-test)直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 写你自己的名字

Use sass 我的这个demo要用sass所以，我选的yes，大家可以根据自己的需求选择yes or no

在你的项目根目录下，运行：npm run dev之后，会自动打开你的默认浏览器：http://localhost:8080/ 效果如下：

项目目录：
------------------mydemo

--------------------------src

----------------------------------page

--------------------------------------------------menu1

---------------------------------------------------------------------menuTab.vue

--------------------------------------------------menu2

---------------------------------------------------------------------menuTable.vue

--------------------------------------------------404.vue

--------------------------------------------------home.vue

--------------------------------------------------login.vue

----------------------------------App.vue

----------------------------------main.js

----------------------------------router.js

--------------------------favicon.ico

--------------------------index.html

--------------------------package.json

--------------------------webpack.config.js

然后我们将自己想要的页面什么的慢慢加进去：
1.在根目录下添加favicon.ico图标，我是直接把：mydemo/src/assets下的logo.png改成favicon.ico。

2.在webpack.config.js中添加以下代码：

然后我们再执行一次：npm run dev

然后就报错啦报错啦：

解决方法：
执行npm install html-webpack-plugin -save-v

3.在index.html中引入favicon.ico图标：

4.新增所需vue文件和js文件：

5.引入所需的npm：element-ui、vue-router、font-awesome、style-loader。

最后呢我们一起来看看具体哪些重要的vue文件和js文件代码是什么样子的。

代码来啦：
webpack.config.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here 我在这里http://www.cnblogs.com/yingzi1028/p/6925387.html

}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.css$/,
loader: "style-loader!css-loader"
},
{
test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
loader: 'file-loader'
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
favicon: 'favicon.ico', // 在此处添加一行这个，用于webpack生成index.html时，自动把favicon.ico加入HTML中
inject: true // 我在这里http://www.cnblogs.com/yingzi1028/p/6925387.html
}) ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

package.json

{
"name": "mydemo",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "xiaoying",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"element-ui": "^1.3.4",
"font-awesome": "^4.7.0",
"vue": "^2.3.3",
"vue-router": "^2.5.3"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.5.1",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"sass-loader": "^5.0.1",
"style-loader": "^0.18.1",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mydemo</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>