龙空技术网

JS,Vue.js 3.x入门,vue-cli搭建项目,使用脚手架创建并访问项目

古怪今人 204

前言:

现时看官们对“vuejsnpm”大体比较关注,小伙伴们都想要知道一些“vuejsnpm”的相关资讯。那么小编在网摘上网罗了一些关于“vuejsnpm””的相关知识,希望咱们能喜欢,姐妹们快快来了解一下吧!

介绍及环境

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue只关注视图层, 采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。

官方网站:,中文文档:

独立版本在Vue.js官网上直接下载,用<script>标签引入,使用CDN:

unpkg(推荐): (会保持和 npm 发布的最新的版本一致)。

Staticfile CDN(国内):

环境说明

node版本(node -v):v14.16.1

npm版本(npm -v):6.14.12

yarn版本(npm -v):1.22.17

安装vue-cli

npm安装vue-cli:

npm install -g @vue/cli

yarn安装vue-cli:

yarn global add @vue/cli

查看版本:

vue -V

vue --version

版本为:@vue/cli 5.0.1

创建项目

创建

vue create my-project

这里提供了3中设置:Vue3版(Default ([Vue 3] babel, eslint))、Vue2版(Default ([Vue 2] babel, eslint))、手动选择功能(Manually select features)

这里选择:Manually select features

选择配置

(*) Babel:支持用Babel编译器;

(*) TypeScript:支持使用 TypeScript 书写源码;

( ) Progressive Web App (PWA) Support:支持PWA;

(*) Router:支持vue-router;

(*) Vuex:支持vuex;

(*) CSS Pre-processors:支持CSS预处理器;

(*) Linter / Formatter:支持代码风格检查和格式化;

( ) Unit Testing:支持单元测试;

( ) E2E Testing: 支持E2E测试;

选择Vue版本

这里选择:3.x

是否使用babel做转义

这里选择:Y

是否使用Babel与TypeScript一起用于自动检测的填充

这里选择:Y

是否使用history路由模式

这里选择:Y

选择CSS预处理器

Sass/SCSS分两种:

node-sass:用node(调用cpp编写的libsass)来编译sass,是自动编译实时。

dart-sass:用drat VM来编译sass,需要保存后才会生效。

这里选择:Sass/SCSS (with dart-sass)

选择eslint配置

1、ESLint with error prevention only:只进行报错提醒;

2、ESLint + Airbnb config:Airbnb配置,不严谨模式;

3、ESLint + Standard config:标准配置,正常模式;

4、ESLint + Prettier:严格模式;

这里选择:ESLint with error prevention only

选择什么时候执行eslint校验

Lint on save:保存时检查

Lint and fix on commit:提交时检查

这里选择:Lint on save

选择配置文件存放的位置

In dedicated config files:在专用的配置文件中单独存放。

In package.json:存放在package.json中。

这里选择:In dedicated config files

是否保存之前的配置项

这里选择:N

下载依赖模块

等待创建好。

启动项目

进入目录: cd my-project

启动项目:yarn serve 或者 npm run serve

访问:

打开项目

标签: #vuejsnpm