webpack 搭建vue初始化vue項目_vue init webpack 命令

webpack 搭建vue项目流程

一、安装node

二、安装vue脚手架构建工具，命令行输入  npm install –g @ vue/cli-init

三、安装webpack

通过npm或cnpm安装webpack模块化打包工具

npm install webpack –g或cnpm install webpack –g

四、vue-cli初始化webpack项目

创建一个基于 webpack 模板的新项目

执行命令：vue init webpack wangjie，建立项目。

其中wangjie使我们要建立的项目名称，当脚本执行时，会继续进行确认。

安装依赖，如下所示：

Project name wangjie

Project name wangjie填写你定义的项目名称

Project description xiaowang填写对项目的描述

Author填写作者名

Vue build standalone

Install vue-router? Yes是否安装vue-router

Use ESLint to lint your code? No 是否用ESLint

Set up unit tests No 是否建立Unit单元测试

Setup e2e tests with Nightwatch? No 是否E2E黑盒测试

Should we run `npm install` for you after the project has been created? (recommended) npm

是否

说明：

ESLint的作用是检查代码错误和统一代码风格的。确认添加ESLint后，在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。

eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。

eslintrc.js是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。

Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。

Mocha是一个测试框架，在vue-cli中实现单元测试。

五、启动项目

执行初始化项目以后，下面会有对应的命令：

已经初始化了项目，并且在 package.json 里面已经有相关配置，所以在这里可以直接安装；

安装完成之后再执行命令： npm run dev