使用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 选择构建方式

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

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

使用webpack搭建vue项目；webpack+vue相关推荐

php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
vue3 项目创建(UI图形化界面方式，可视化操作Vue项目，vue ui)
vue3 项目创建 (UI图形化界面方式,可视化操作Vue项目,vue ui) 目录一.图形化界面方式搭建vue3 项目前提条件 1.检查node 和 @vue/cli 版本信息 2.升级你的 No ...
vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12) 前言一.webpack配置 1.配置vue.config.js 2.配置Dl ...
ABAP system landscape和vue项目webpack构建的一种实践
基于Netweaver的ABAP transport route一般都有dev,test和prod三种类型的系统. 而Vue前端项目的webpack build设置也类似. 以SAP成都研究院数字创新 ...
【vue项目】vue项目创建全流程，创建使用 vue-cli 搭建项目
一. 使用 vue-cli 搭建项目 1.安装vue/cli ,执行下面的命令安装或是升级 npm i -g @vue/cli npm i -g @vue/cli 安装报错如果安装报错如下 np ...
使用webpack搭建react项目
初始化项目空间新建一个项目目录,在目录下执行:npm init -y 此时将会生成 package.json 文件之后新建 src.config(配置webpack)文件夹,新建index.htm ...
在Centos 7 上跑 vue 项目以及 Vue 热更新失效
安装npm yum install npm 安装vue npm install vue 安装vue-cli sudo npm install --global vue-cli 注意: 因为全局安装,会 ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

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

使用webpack搭建vue项目；webpack+vue相关推荐

最新文章

热门文章