vue-cli脚手架——3.0版本项目案例

一、【准备工作】

node与git部分见vue-cli2.0搭建案例

vue-cli3.0是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）

全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则vue -V查看依旧是2.x旧版：

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

vue-cli3.0需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）

node -v  //查看版本

安装@vue/cli（vue-cli 3.0的包名称由 vue-cli 改成了 @vue/cli）

cnpm install -g @vue/cli  //yarn global add @vue/cli
vue -V //查看版本,注意是大写V

vue-cli  >= 3 和旧版使用了相同的 vue 命令，所以 vue-cli  2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected].x` 相同
vue init webpack my-project

二、【vue-cli3.0搭建项目】

（1）使用命令行搭建项目：

1.搭建一个新项目,除最后两个，其他选项都是你此前保存的预设配置，其中插件安装选择列表：方向键选择（按 “空格键”选择/取消选择，A键全选/取消全选）

vue create my-pro-ui //文件名 不支持驼峰（含大写字母）

# OR //可视化页面搭建项目
vue ui
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel                            //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
 ( ) TypeScript　　　　　　　　　　　　  // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人用
 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 ( ) Router                           // vue-router（vue路由）
 ( ) Vuex                             // vuex（vue的状态管理模式）
 ( ) CSS Pre-processors               // CSS 预处理器（如：less、sass）
 ( ) Linter / Formatter               // 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing                     // 单元测试（unit tests）
 ( ) E2E Testing                      // e2e（end to end） 测试

2.选择对应功能的具体工具包：是否使用history router + css预处理器 + ESLint + 2.0升级

手动配置案例：https://www.jianshu.com/p/6307c568832d

①是否使用history router：

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

hash： 浏览器url址栏 中的 # 符号（如这个 URL：http://www.abc.com/#/hello，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面

history：利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定浏览器支持）。单页客户端应用，history mode 需要后台配置支持（详细参见：https://router.vuejs.org/zh/guide/essentials/history-mode.html）

② css预处理器:主要为css解决浏览器兼容、简化CSS代码 等问题（* Sass诞生于2007年，最早也是最成熟的一款CSS预处理器语言。）

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> SCSS/SASS  //Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）
  LESS       //Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
  Stylus     //Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。

③ ESLint：

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier         //使用较多

④ 何时检测：

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save                    // 保存就检测
 ( ) Lint and fix on commit          // fix和commit时候检查

⑤ 单元测试 ：

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai  //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
  Jest          //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

⑥ 如何存放配置 ：

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
  In package.json // 放package.json里

⑦ 是否保存本次配置（之后可以直接使用）：

? Save this as a preset for future projects? (Y/n) // y:记录本次配置，然后需要你起个名; n：不记录本次配置

（2）使用图形化界面：

安装完成：你可以在这管理（安装、删除）插件、运行并分析你的项目文件

参考：

https://cli.vuejs.org/zh/guide/installation.html

https://my.oschina.net/wangnian/blog/2051369

原文地址：https://www.cnblogs.com/wheatCatcher/p/11217894.html

时间： 2024-10-08 03:57:15

vue-cli脚手架——3.0版本项目案例的相关文章

更新到@vue/cli 4.1.1版本的前端开发前的准备

一.概念简述 1.node.js目的是提供一个JS的运行环境. 2.npm(node package manager)是一个JS包管理器. 二.检查自己的电脑是否已安装相关配置 1.查看node.js 2.查看npm或cnpm 这里我是用了淘宝的cnpm镜像 3.查看vue版本 可以查看vue内置命令 有ui这个命令方可使用vue ui进入UI界面的项目初始化. 三.通过配置达到上述的配置结果 首先,去node.js官网下载最新版的node.js,下载好根据提示安装完毕即可. 其次,npm是随着

vue.cli脚手架初次使用图文教程

vue.cli脚手架初次使用图文教程 我之前的环境是安装了node.js, 我记得曾经好像安装过vue ,不过现在又要重新开始学习起来了.在youtube上看了一vue的相关教程,还是需要实操的. 好像安装过npm -v 发现已经安装了5.6.0 需要安装然后使用 cnpm 安装 vue-cli 和 webpack 安装代码:npm install -g vue-cli 一.生成项目 首先需要在命令行中进入到项目目录,然后输入: vue init webpack vue-testone p.p1

web前端 -- vue -- vue cli脚手架

搭建 vue-cli 脚手架 1. 依赖的环境是:node.js 1.1.检测node和npm版本 node.js 官网下载页,选择 windows 系统 msi 安装版本,一路 next 安装. 要有6.9以上的node:node-v 要有3.10以上的npm:npm -v 附:安装node.js 1.2. 安装全局 vue cli Linux下使用命令:sudo npm install --global vue-cli windows下:npm install --global vue-cl

vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.env.js 我们需要做配置的就是第一个和第三个. 其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件,那么打开dev.en.js,开发环境.原本代码如下: 'use strict' const merge = require('webpack-merge') const prodEnv

用 vue cli 脚手架搭建单页面 Vue 应用（进阶2）

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定. 2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https://reg

vue cli 脚手架上多页面开发 支持webpack2.x

A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: https://github.com/yurizhang/vue_multiple_page   直接拉下来看代码就好,没几行修改. 主要修改:几个文件即可 ,主要是node.js代码,使用beyond file compare比较一下即可. 项目地址: https://github.com/yuri

VS Code引用 vue/cli

npm i @vue/cli -g    引用cli脚手架 3.0版本 下载好后 找个空文件夹  vue create myvue 创建vue项目   myvue是自己项目名称 Your connection to the default  npm  registry seems to be slow. Use  https://registry.npm.taobao.org for fster installation?   这两句是引用淘宝镜像  Yes就可以 Please pick a p

vue 安装cli3.0版本，创建项目

注意:Vue CLI需要Node.js版本8.9或更高版本(建议使用8.11.0+). 查看node版本:node -v  , 查看npm 版本  npm -v, 1.首先需要安装node.js环境 2.如果在vue-cli全局安装了以前的(1.x或2.x)软件包,则需要先使用npm uninstall vue-cli -g或卸载它yarn global remove vue-cli. 3.使用以下命令行安装cli3  1.npm install -g @vue/cli     2.npm in

【Vue CLI】从安装到构建项目再到目录结构的说明 &#196968;

目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 原文: http://blog.gqylpy.com/gqy/284 "Vue CLI是一个基于Vue.js进行快速开发的完整系统. Vue CLI致力于将Vue生态中的工具基础标准化.它确保了各种构建工具只需给予智能的默认配置便可平稳衔接. 这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题.于此同时,它还为每个工具提供了调整配置的灵活性.