一、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的学习过程,希望能帮助初入坑的童鞋,也希望获得更多的交流和指正。