使用webpack搭建vue项目；webpack+vue

想要使用webpack搭建Vue项目时，首选需要安装vue-cli和webpack、webpack-cli

全局安装vue-cli

这里使用的是npm安装

npm install -g vue-cli 

vue-V 查看版本号 是否安装成功

全局安装webpack

npm install webpack -g 或者 npm install -g webpack

 安装完成webpack 后,需要安装webpack-cli

全局安装webpack-cli

npm i -g  webpack-cli 或者  npm install webpack-cli -g

webpack搭建vue项目

 输入vue init webpack 项目名称

创建时会出现以下信息 按需选择回车就行  我下面也会有介绍

 输入 vue init weback 项目名称(自己取名) 后

Project name : 项目名称,如果不需要就直接回车。注意:此处项目名不能使用学大。

Project description : 项目描述，直接回车

Author : 作者

Vue build 选择构建方式

两个选择(上下箭头选择，回车选定)

1. Runtime + Compiler : recommended for most users (译: 运行+编译:被推荐给大多数用户)
2. Runtime-only : about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY

Allowed in .vue files-render functions are required elsewhere

(译 : 只运行大约6KB比较轻量的压缩文件，但只允许模板(或任何VUE待定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准，意思大概是选择构建方式对文件大小有要求)

这里推荐使用1选项，适合大多数用户的

Install vue-router ? 是否安装vue的路由插件，需要就选y，否则就n(以下均遵循此方法)

Use ESLint to lint your code ? 是否使用ESLint 检测你的代码 ?

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

Pick an ESLint preset : 选择分支风格

选项有 三个

1. Standard(https://github.com/feross/standard) js 的标准风格
2. Airbnb(https://github.com/airbnb/javascript ) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
3. none (configure it yourself) 自己配置

Setup unit tests ? 是否安装单元测试

Pick a test runner 选择一个单元测试运行器

选项有三个

1. Jest (Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
2. Karma and Mocha
3. none

Setup e2e tests with Nightwatch ?

是否安装E2E测试框架NightWatch (E2E , 也就是End To End , 就是所谓的 “用户真实场景” 。)

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

(译 : 项目创建后是否要为你运行 “npm run install ” ? 这里选择包管理工具三个)

Yes , use npm (使用npm)

Yes , use yarn (使用yarn )

No , I will handle that myself(自己操作)

 项目创建成功后的目录

使用vscode打开运行npm run dev

 

浏览器成功运行项目

 就此webpack+vue项目搭建完毕