使用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项目搭建完毕

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值