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"

]

}