vue+webpack項目配置文檔

1.cmd 安裝cnpm 百度cnpm　　

npm install -g cnpm --registry=https://registry.npm.taobao.org

(若是npm不是內部或外部命令，請先安裝node.js)

2.安裝vue

npm install vue / cnpm install vue

3.安裝 vue腳手架 （命令行工具）

npm install --global vue-cli / cnpm install --global vue-cli

 

4. 建立項目

注意：建立項目的時候首先進入你的一個項目文件夾

vue init webpack my-project 官方提供的

vue init webpack-simple vuedemo01 （咱們使用的）

vue init webpack-simple 項目名稱 （默認安裝的2.0）

vue init webpack-simple#1.0  項目名稱

 

5.安裝依賴

cd vuedemo01
npm install / cnpm install (推薦)

 

6. 運行項目npm run dev

 

這時候一個基礎的vue+webpack項目就搭建完成了，可是根據不一樣的項目，vue所須要的依賴和配置也是不一樣的，這裏，我把一些經常使用的依賴和配置安裝簡單的介紹一下。

cnpm install axios element-ui less vuex vue-router -S

/axios  這是用於交互
/element-ui  這是組件
/less 這是less（相似於css，但層次更明朗）
/vuex 這是vue狀態管理
/vue-router 路由

cnpm install less-loader babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx url-loader -D

/less-loader   less的loader配置
/babel-plugin-transform-object-rest-spread （如下均爲解析器)
/babel-preset-es2015
/babel-helper-vue-jsx-merge-props
/babel-plugin-syntax-jsx
/babel-plugin-transform-vue-jsx
/url-loader

 

 

修改.babelrc文件

{
　　"presets": [
　　　　["es2015", { "modules": false }]
　　],
　　"plugins":["transform-object-rest-spread","transform-vue-jsx"]
}

 

 

7.在webpack.config.js中配置解析器，添加（修改）如下內容

{
　　test: /\.css$/,
　　loader: 'style-loader!css-loader!less-loader',
　　exclude: /node_modules/
},
{
　　test: /\.(woff|svg|eot|ttf)\??.*$/,
　　loader: 'url-loader'
},

 

8.在頁面中引入所須要的一些插件，或者在main.js中導入（如jquery.js）

 

package.json

 

{

"name": "spongebob",

"version": "1.0.0",

"description": "A Vue.js project",

"author": "xinghen <154161795@qq.com>",

"private": true,

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"unit": "jest --config test/unit/jest.conf.js --coverage",

"e2e": "node test/e2e/runner.js",

"test": "npm run unit && npm run e2e",

"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",

"build": "node build/build.js"

},

"dependencies": {

"axios": "^0.18.0",

"babel-polyfill": "^6.26.0",

"element-ui": "^2.4.1",

"less": "^3.0.4",

"vue": "^2.5.2",

"vue-router": "^3.0.1",

"vuex": "^3.0.1"

},

"devDependencies": {

"autoprefixer": "^7.1.2",

"babel-core": "^6.22.1",

"babel-eslint": "^8.2.1",

"babel-helper-vue-jsx-merge-props": "^2.0.3",

"babel-jest": "^21.0.2",

"babel-loader": "^7.1.1",

"babel-plugin-dynamic-import-node": "^1.2.0",

"babel-plugin-syntax-jsx": "^6.18.0",

"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",

"babel-plugin-transform-runtime": "^6.22.0",

"babel-plugin-transform-vue-jsx": "^3.5.0",

"babel-preset-env": "^1.3.2",

"babel-preset-stage-2": "^6.22.0",

"babel-register": "^6.22.0",

"chalk": "^2.0.1",

"chromedriver": "^2.27.2",

"copy-webpack-plugin": "^4.0.1",

"cross-spawn": "^5.0.1",

"css-loader": "^0.28.0",

"eslint": "^4.15.0",

"eslint-config-standard": "^10.2.1",

"eslint-friendly-formatter": "^3.0.0",

"eslint-loader": "^1.7.1",

"eslint-plugin-import": "^2.7.0",

"eslint-plugin-node": "^5.2.0",

"eslint-plugin-promise": "^3.4.0",

"eslint-plugin-standard": "^3.0.1",

"eslint-plugin-vue": "^4.0.0",

"extract-text-webpack-plugin": "^3.0.0",

"file-loader": "^1.1.4",

"friendly-errors-webpack-plugin": "^1.6.1",

"html-webpack-plugin": "^2.30.1",

"less-loader": "^4.1.0",

"jest": "^22.0.4",

"jest-serializer-vue": "^0.3.0",

"nightwatch": "^0.9.12",

"node-notifier": "^5.1.2",

"optimize-css-assets-webpack-plugin": "^3.2.0",

"ora": "^1.2.0",

"portfinder": "^1.0.13",

"postcss-import": "^11.0.0",

"postcss-loader": "^2.0.8",

"postcss-url": "^7.2.1",

"rimraf": "^2.6.0",

"selenium-server": "^3.0.1",

"semver": "^5.3.0",

"shelljs": "^0.7.6",

"uglifyjs-webpack-plugin": "^1.1.1",

"url-loader": "^0.5.8",

"vue-jest": "^1.0.2",

"vue-loader": "^13.3.0",

"vue-style-loader": "^3.0.1",

"vue-template-compiler": "^2.5.2",

"webpack": "^3.6.0",

"webpack-bundle-analyzer": "^2.9.0",

"webpack-dev-server": "^2.9.1",

"webpack-merge": "^4.1.0"

},

"engines": {

"node": ">= 6.0.0",

"npm": ">= 3.0.0"

},

"browserslist": [

"> 1%",

"last 2 versions",

"not ie <= 8"

]

}