vue+webpack安裝,生成初始化vue項目

02-10

一、webpack安裝。

當然，在這之前，你得先安裝好node.js。

1、npm安裝webpack。

npm install -g webpack //全局安裝

npm install -g webpack-dev-server //安裝調試工具

2、創建項目

mkdir projectName //創建項目文件夾

cd projuectName //進入該文件目錄下

npm init //在目錄下創建package.json文件，一直回車即可，也可輸入你想要修改的內容

之後在目標文件中可以看到 package.json文件。

二、安裝項目依賴

這裡我們可以直接在package.json文件中添加相應的依賴，然後命令運行npm install。也可以使用命令npm install fileName --save-dev，來進行相關的依賴文件安裝，安裝成功後，我們可以在目錄中檢查：

下面是我的一個package.json文件：

"devDependencies": { "autoprefixer": "^6.4.0", "babel-core": "^6.0.0", "babel-eslint": "^7.0.0", "babel-loader": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "babel-register": "^6.0.0", "chai": "^3.5.0", "chalk": "^1.1.3", "chromedriver": "^2.21.2", "connect-history-api-fallback": "^1.1.0", "cross-spawn": "^4.0.2", "css-loader": "^0.25.0", "eslint": "^3.7.1", "eslint-config-standard": "^6.1.0", "eslint-friendly-formatter": "^2.0.5", "eslint-loader": "^1.5.0", "eslint-plugin-html": "^1.3.0", "eslint-plugin-promise": "^2.0.1", "eslint-plugin-standard": "^2.0.1", "eventsource-polyfill": "^0.9.6", "express": "^4.13.3", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "function-bind": "^1.0.2", "html-webpack-plugin": "^2.8.1", "http-proxy-middleware": "^0.17.2", "inject-loader": "^2.0.1", "isparta-loader": "^2.0.0", "json-loader": "^0.5.4", "karma": "^1.3.0", "karma-coverage": "^1.1.1", "karma-mocha": "^1.2.0", "karma-phantomjs-launcher": "^1.0.0", "karma-sinon-chai": "^1.2.0", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.26", "karma-webpack": "^1.7.0", "lolex": "^1.4.0", "mocha": "^3.1.0", "nightwatch": "^0.9.8", "opn": "^4.0.2", "ora": "^0.3.0", "phantomjs-prebuilt": "^2.1.3", "selenium-server": "2.53.1", "semver": "^5.3.0", "shelljs": "^0.7.4", "sinon": "^1.17.3", "sinon-chai": "^2.8.0", "style-loader": "^0.13.1", "stylus": "^0.54.5", "stylus-loader": "^2.4.0", "url-loader": "^0.5.7", "vue-loader": "^10.0.0", "vue-style-loader": "^1.0.0", "vue-template-compiler": "^2.1.0", "webpack": "^1.13.2", "webpack-dev-middleware": "^1.8.3", "webpack-hot-middleware": "^2.12.2", "webpack-merge": "^0.14.1" }

三、配置webpack.config.js，手動創建配置。

var path = require(path);module.exports = { entry: [./src/main.js], //項目入口文件的路徑，可以有多個文件 output: { //定義webpack輸出的文件，這裡設置了文件輸出在dist文件夾下面的build.js path: ./dist, publicPath:./dist/, filename: build.js }, //配置自動刷新,如果打開會使瀏覽器刷新而不是熱替換 /*devServer: { historyApiFallback: true, hot: false, inline: true, grogress: true },*/ module: { loaders: [ //轉化ES6語法 { test: /.js$/, //這裡是匹配文件的正則 loader: babel, //這裡是指定調用loader去處理對應文件類型 exclude: /node_modules/ }, //解析.vue文件 { test:/.vue$/, loader:vue }, //圖片轉化，小於8K自動轉化為base64的編碼 { test: /.(png|jpg|gif)$/, loader:url-loader?limit=8192 } ] }, vue:{ loaders:{ js:babel //loader來這裡吧。 } }, resolve: { // require時省略的擴展名，如：require(app) 不需要app.js extensions: [, .js, .vue], // 配置簡寫，路徑可以省略文件類型 alias: { filter: path.join(__dirname, ./src/filters), components: path.join(__dirname, ./src/components) } } }

四、使用vue。

安裝vue-cli

npm install -g vue-cli //全局安裝vue-cli

vue init webpack projectName //生成項目名為projectName的模板，這裡的項目名projectName //項目名稱

cd projectName //進入項目文件

npm install //初始化安裝依賴

安裝後會生成如下圖的目錄：

初始化依賴完成後，命令運行：npm run dev。

上述完成後，我們就完成vue的項目就已經生產完成，當我們運行localhost:8080就能看見如下圖的vue官方logo：

前端小坑，第一次知乎發文，分享一點入坑vue的學習過程，希望能幫助初入坑的童鞋，也希望獲得更多的交流和指正。