注意:此处没讲webpack的配置
1. 确立项目所需要的所有依赖、框架(比如bootstrap,vue,angular等)
2. 在项目的根目录下创建一个package.json文件,package.json文件是项目的最重要文件之一,下面是我的一个项目中得依赖文件:
{
"name": "element-starter",
"description": "A Vue.js project",
"author": "yi.shyang@ele.me",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --hot --env.dev",
"build": "rimraf dist && webpack -p --progress --hide-modules"
},
"dependencies": {
"element-ui": "^1.3.1",
"font-awesome": "^4.7.0",
"vue": "^2.1.8",
"echarts": "^3.3.2"
},
"engines": {
"node": ">=6"
},
"devDependencies": {
"autoprefixer": "^6.6.0",
"axios": "^0.16.1",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.0",
"babel-preset-vue-app": "^1.2.0",
"css-loader": "^0.27.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.24.1",
"postcss-loader": "^1.3.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"vue": "^2.3.2",
"vue-loader": "^11.1.4",
"vue-router": "^2.5.3",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}
3. 在命令行工具中使用 npm install 命令进行依赖安装,(可以使用 cnpm 提高安装速度)这时你会发现,项目的根目录下多了一个node_modules文件夹,那里面就是从npm远程库里下载的模块然后“安装”到你的项目中的。
现在,你就可以在你的项目中应用你依赖的这些modules了。你可以通过require关键字来使用他们。
const qs = require('querystring');
4. 接下来就根据你所使用的前端框架进行项目搭建与编写,
5. 如果你是打开一个现成的项目,首先你需要安装依赖参考第 3 步, 然后在命令行工具中使用 npm run 来启动项目, 如果启动失败,就看package.json文件里面的script里面设置的启动命令, 比如:
"scripts": {
"dev": "webpack-dev-server --inline --hot --env.dev",
"build": "rimraf dist && webpack -p --progress --hide-modules"
},
上面的项目我就需要使用 npm run dev 启动