使用vue-cli+webpack构建Vue项目

使用vue-cli+webpack构建Vue项目,需要全局安装:

node.js

windows下,直接在官网下载安装包,运行安装就可以了。NPM是随同NodeJS一起安装的包管理工具。

webpack

 npm i webpack webpack-cli -g

vue-cli

npm install -g vue-cli

另外,可以全局安装一下eslint、cnpm和yarn

eslint

ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

首先,安装 ESLint。

npm i -g eslint

然后,安装 Airbnb 语法规则,以及 import、a11y、react 插件。

npm i -g eslint-config-airbnb
npm i -g eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

cnpm

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

yarn

npm install -g yarn

使用vue-cli+webpack构建Vue项目

vue init webpack vue-study

vue-study是自己起的创建的项目名称

运行这行命令以后,会有提示,按照提示输入和选择,一路回车就可以了

最后一个可以选择npm install 或yarn install 回车就会直接安装依赖包

依赖安装完成以后会有提示下一步:进入项目文件夹,运行npm run dev就可以了

生成的项目目录:

可以在package.json中配置一下"dev",增加一个 --open  ,可以在运行npm run dev 的时候,自动打开浏览器

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

猜你喜欢

转载自blog.csdn.net/sleepwalker_1992/article/details/82313821