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

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

全局安装vue-cli

这里使用的是npm安装

npm install -g vue-cli 

使用webpack搭建vue项目;webpack+vue_第1张图片

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

使用webpack搭建vue项目;webpack+vue_第2张图片

全局安装webpack

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

使用webpack搭建vue项目;webpack+vue_第3张图片

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

全局安装webpack-cli

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

webpack搭建vue项目

使用webpack搭建vue项目;webpack+vue_第4张图片

 输入vue init webpack 项目名称

使用webpack搭建vue项目;webpack+vue_第5张图片

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

使用webpack搭建vue项目;webpack+vue_第6张图片

 输入 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) 自己配置

使用webpack搭建vue项目;webpack+vue_第7张图片

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(自己操作)

使用webpack搭建vue项目;webpack+vue_第8张图片

 项目创建成功后的目录

使用webpack搭建vue项目;webpack+vue_第9张图片

使用vscode打开运行npm run dev

 使用webpack搭建vue项目;webpack+vue_第10张图片

浏览器成功运行项目

使用webpack搭建vue项目;webpack+vue_第11张图片

 就此webpack+vue项目搭建完毕

你可能感兴趣的:(vue,webpack,vue.js,vue,webpack,前端,前端框架)