想要使用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 选择构建方式
两个选择(上下箭头选择,回车选定)
- Runtime + Compiler : recommended for most users (译: 运行+编译:被推荐给大多数用户)
- 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 : 选择分支风格
选项有 三个
- Standard(https://github.com/feross/standard) js 的标准风格
- Airbnb(https://github.com/airbnb/javascript ) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
- none (configure it yourself) 自己配置
Setup unit tests ? 是否安装单元测试
Pick a test runner 选择一个单元测试运行器
选项有三个
- Jest (Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
- Karma and Mocha
- 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项目搭建完毕