首先我認爲你已經安裝而且會使用node.js 和 npm
<hr/>css
npm install -g cnpm --registry= https://registry.npm.taobao.org
一、安裝了淘寶鏡像html
cnpm install webpack -g
二、沒安裝vue
npm install webpack -g
npm install vue-cli -g
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 寫你本身的名字
*必須這麼寫node
npm install
npm run dev
總結一下不能成功的緣由:
一、node 、npm版本
二、遺漏步驟webpack
若是不熟悉移步官網:http://element.eleme.io/#/zh-CN
一、cnpm i element-ui@1.2.5 -S(推薦1.2.5版本)
二、而後在 main.js 引入並註冊web
import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(Element)
三、須安裝vue-router
cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev
安裝好後package.json下的內容vue-cli
{npm
"name": "vue-router-cli", "description": "A Vue.js project", "version": "1.0.0", "author": "Allen <13402202685@163.com>", "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.2.5",* "vue": "^2.2.1", "vue-resource": "^1.2.1", "vue-router": "^2.3.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-latest": "^6.0.0", "cross-env": "^3.0.0", *"css-loader": "^0.25.0",* *"file-loader": "^0.9.0",* *"style-loader": "^0.16.1",* "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" } }
四、在 webpack.config.js 中的 loaders 數組加入如下配置element-ui
{ test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/, loader: "file" }
如今就可使用Element了,若是你想用其餘的UI框架也能夠自行安裝的
npm run build
看了一篇很是棒的文章爲了給本身作一個筆記,總結了一下。