阅读 415

从脚手架开始学前端 【第5期】Vue脚手架搭建

一、安装前言

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或已有项目整合。

二、安装特点

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

三、安装

小知识点:渐进式的意思是指可以在页面直接引入使用也可以在脚手架中使用

1.独立版本

我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过 开发环境不要使用最小压缩版,不然会没有错误提示和警告!

使用vue多页面开发:

  • 引入vue.js
  • 创建一个vue根实例 new Vue({选项})

2.使用CDN引入

3.NPM安装

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service),该依赖: 可升级; 基于 webpack 构建,并带有合理的默认配置; 可以通过项目内的配置文件进行配置; 可以通过插件进行扩展。 一个丰富的官方插件集合,集成了前端生态中最好的工具。 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。 在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM有完整的生态,能很好的Webpack或者Browserify 模块打包器配合使用。

vue-cli3脚手架安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli
# TEST
vue -V
复制代码

创建项目

vue create my-project
# OR
vue ui
复制代码

命令讲解

根据提示,我们选择搭建项目需要集成的工具,对于新手,一般建议使用默认,如果需要其他集成,用方向键移动到手动选择功能,然后点击回车键

Vue CLI v4.2.3
? Please pick a preset: (Use arrow keys) //请选择一个预设:(使用箭头键)
> default (babel, eslint)                //默认(babel,eslint)
  Manually select features               //手动选择功能
复制代码

如果创建过,会提示下面信息

Vue CLI v4.2.3
? Target directory my-template already exists. Pick an action: (Use arrow keys) //目标目录my-template已存在
选择一个动作:(使用箭头键)
> Overwrite      //覆写上次配置
  Merge          //合并
  Cancel         //取消                                                                                             
复制代码

选择Overwrite覆盖上次配置

Vue CLI v4.2.3
? Target directory D:\my-project already exists. Pick an action: Overwrite
Removing D:\my-project...
复制代码

根据自己的习惯,用箭头键选择对应的包管理器,小编用的是Yarn,选中直接点击回车

Vue CLI v4.2.3
? Please pick a preset: default (babel, eslint)                                   //当前选中的选项记录
? Pick the package manager to use when installing dependencies: (Use arrow keys)  //选择安装依赖项时要使用的程序包管理器:(使用箭头键)
> Use Yarn
  Use NPM     
复制代码

使用Yarn拉取项目

Vue CLI v4.2.3
✨  Creating project in D:\xunzhaotech\my-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                success Saved lockfile.
Done in 88.14s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                        success Saved lockfile.
Done in 17.99s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ yarn serve
复制代码

如果用的是NPM包管理器,选中直接点击回车

Vue CLI v4.2.3
? Please pick a preset: default (babel, eslint)                                   //当前选中的选项记录
? Pick the package manager to use when installing dependencies: (Use arrow keys)  //选择安装依赖项时要使用的程序包管理器:(使用箭头键)
   Use Yarn
>  Use NPM     
复制代码

使用NPM拉取项目

Vue CLI v4.2.3
✨  Creating project in D:\xunzhaotech\my-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                success Saved lockfile.
Done in 88.14s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                        success Saved lockfile.
Done in 17.99s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve
复制代码

上述我们使用的默认选项,下面我们进入手动选择选项,点击回车

Vue CLI v4.2.3
? Please pick a preset:       //请选择一个预设
  default (babel, eslint)     //默认(babel,eslint)
> Manually select features    //手动选择功能
复制代码

根据我们项目的需要,结合方向键和空格键选择我们需要的配置,然后点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features //请选择一个预设:手动选择功能
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)//选取项目所需的功能:(按<空格>选择,<a>切换全部,<i>反转选择)
>(*) Babel                                   //集成Babel
 (*) TypeScript                              //集成TypeScript 
 (*) Progressive Web App (PWA) Support       //集成渐进式Web应用程序(PWA)支持   
 (*) Router                                  //集成Router
 (*) Vuex                                    //集成Vuex
 (*) CSS Pre-processors                      //集成预处理(Less/SCSS/Sass/Stylus)
 (*) Linter / Formatter                      //集成代码校验和格式化
 (*) Unit Testing                            //集成单元测试(站在程序员的角度测试)
 (*) E2E Testing                             //集成单元测试(站在用户角度的测试 )                                                                                                    
复制代码

根据我们的需要,选择(Y/n),如果全部使用,直接回车,在选择CSS预处理(CSS Pre-processors) 的时候,根据自己的习惯选择

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes //使用类样式的组件语法
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes //将Babel与TypeScript一起使用(用现代模式,自动检测的polyfill,转译JSX)
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes //使用路由器的历史记录模式?
(需要适当的服务器设置才能在生产中进行索引回退)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)//选择一个CSS预处理器(默认情况下支持PostCSS,Autoprefixer和CSS模块)
> Sass/SCSS (with dart-sass) //dart-sass保存后生效
  Sass/SCSS (with node-sass) //node-sass自动编译实时
  Less
  Stylus                                                                                                                                                                                                                                                             
复制代码

选择需要校验和格式化的方式(Linter / Formatter),选择ESLint + Standard config点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: (Use arrow keys) //选择一个lint / formatter配置
  ESLint with error prevention only //仅具有错误预防功能的ESLint
  ESLint + Airbnb config            //ESLint + Airbnb 配置
> ESLint + Standard config          //ESLint +标准配置
  ESLint + Prettier                 //ESLint +代码美化
  TSLint (deprecated)               //TSLint(已弃用)                                                                                         
复制代码

根据需要选择保存时候校验,或者提交时修复校验,然后点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) //选择其他校验功能
>(*) Lint on save           //保存时校验(保存时校验)
 ( ) Lint and fix on commit //校验并修复提交 (提交时校验)              
复制代码

Jest是由facebook发布的,最近比较火热的一个测试框架。Jest的优势是:

  1. Jest容易安装配置:Jest可以说是零配置的,它会自动识别一些测试文件。只要用npm安装jest之后运行jest,即可完成测试,非常容易。
  2. Jest提供snapshot功能: snapshot功能能够确保UI不会意外被改变。Jest会把结果值保存在一个文件当中,每次进行测试的时候会把测试值与文件中的结果值进行比较,如果两个结果值不同,那么开发者可以选择要么改变代码,要么替代结果文件。 3.其他:除了上面所提到的优势,Jest还拥有着非常广阔的API而且更加适合测试React应用。

Mocha是JavaScript界中最受欢迎的一款单元测试框架。

1.灵活性: Mocha比较灵活,和更多的一些库结合使用。 2.资料较多:Mocha是比较年老的测试框架,在JavaScript界中更加广泛地使用。因此Mocha的community比较大,本文我们选择Mocha + Chai,然后点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: (Use arrow keys) //选择一个单元测试解决方案
> Mocha + Chai    //Mocha是JavaScript界中最受欢迎的一款单元测试框架
  Jest            //Jest是由facebook发布的,最近比较火热的一个测试框架                                                                                                                                                                                                                                                                 
复制代码

现代比较流行的 e2e 测试框架有Nightwatch、TestCafe、Protractor、WebdriverIO、Cypress,我们选择 Nightwatch

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: (Use arrow keys)//选择一个E2E测试解决方案:(使用箭头键)
> Cypress (Chrome only) //Cypress(仅Chrome)
  Nightwatch (WebDriver-based) //Nightwatch(基于WebDriver)     
复制代码
Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)//选择浏览器以运行端到端测试
>(*) Chrome
 ( ) Firefox                                                                                                                                                                                                                                                                                          
复制代码

此处我们选择在专用配置文件中,点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)//您更喜欢在哪里放置Babel,ESLint等的配置。
> In dedicated config files //在专用配置文件中
  In package.json           //在package.json中
复制代码

这里我们选择Y,在下次创建项目的时候使用,点击回车


Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) //将此保存为预设以供将来的项目使用吗?                                                                                                                                                                                                                                                                                                                                                                    
复制代码

进入项目并安装依赖

PS cd .\my-project\  
# AND
yarn install
复制代码

项目目录

my-project
│  .browserslistrc
│  .editorconfig
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package.json
│  README.md
│  tsconfig.json
│  yarn.lock
│
├─public
│  │  favicon.ico
│  │  index.html
│  │  robots.txt
│  │
│  └─img
│      └─icons
│              android-chrome-192x192.png
│              android-chrome-512x512.png
│              android-chrome-maskable-192x192.png
│              android-chrome-maskable-512x512.png
│              apple-touch-icon-120x120.png
│              apple-touch-icon-152x152.png
│              apple-touch-icon-180x180.png
│              apple-touch-icon-60x60.png
│              apple-touch-icon-76x76.png
│              apple-touch-icon.png
│              favicon-16x16.png
│              favicon-32x32.png
│              msapplication-icon-144x144.png
│              mstile-150x150.png
│              safari-pinned-tab.svg
│
├─src
│  │  App.vue
│  │  main.ts
│  │  registerServiceWorker.ts
│  │  shims-tsx.d.ts
│  │  shims-vue.d.ts
│  │
│  ├─assets
│  │      logo.png
│  │
│  ├─components
│  │      HelloWorld.vue
│  │
│  ├─router
│  │      index.ts
│  │
│  ├─store
│  │      index.ts
│  │
│  └─views
│          About.vue
│          Home.vue
│
└─tests
    ├─e2e
    │  │  .eslintrc.js
    │  │  globals.js
    │  │
    │  ├─custom-assertions
    │  │      elementCount.js
    │  │
    │  ├─custom-commands
    │  │      customExecute.js
    │  │      openHomepage.js
    │  │      openHomepageClass.js
    │  │
    │  ├─page-objects
    │  │      homepage.js
    │  │
    │  └─specs
    │          test-with-pageobjects.js
    │          test.js
    │
    └─unit
            example.spec.ts
复制代码

启动项目

yarn serve

复制代码

期待

Vue会开设[Vue从出师到挂帅]专题进行讲解,敬请期待!!!

点击下方关注我👇👇👇

往期推荐

从脚手架开始学前端 【第1期】前言

从脚手架开始学前端 【第2期】Node.js环境搭建(windows)

从脚手架开始学前端 【第3期】Node.js环境搭建(CentOS 7)

从脚手架开始学前端 【第4期】Node.js之NPM与PACKAGE.JSON讲解

从脚手架开始学前端 【第5期】Vue脚手架搭建