相關技術：
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圖標：
<link rel="shortcut icon" href="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>