vue-cli创建项目及项目结构解析

目录
  • 1.进入一个目录,创建项目
  • 2.选择你需要的配置项
    • 2.1 选择vue版本
    • 2.2 选择选择是否使用history router
    • 2.3 选择css 预处理器
    • 2.4 选择Eslint代码验证规则
    • 2.5 选择什么时候进行代码规则检测
    • 2.6 选择如何存放配置
    • 2.7 是否保存当前配置
  • 3.项目的配置图
  • 4.项目创建完成
  • 5.输入npm run serve启动项目
  • 6.项目结构解析

上一篇vue-cli 介绍与安装我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目

1.进入一个目录,创建项目

创建项目命令如下:

vue create <Project Name> //文件名 不支持驼峰(含大写字母)

输入完命令后,会让你选择一个preset

我们可以看到,默认有3个选项:

  • 默认的包含了基本的 Babel + ESLint 设置的 preset(Vue2版本)
  • 默认的包含了基本的 Babel + ESLint 设置的 preset(Vue3版本)
  • Manually select features 是自定义配置

我们选择第3个自定义配置

2.选择你需要的配置项

接着我们会跳转到配置项中,我的自定义配置如下:

具体解释如下:

 ◉ Choose Vue version  // 选择vue的版本
 ◉ 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
 ◯ E2E Testing

配置选好后,我们按下回车进行下一步

2.1 选择vue版本

接着我们需要选择vue版本,这里选用vue2.x版本

选择完毕后,按下回车下一步

2.2 选择选择是否使用history router

接着会问我们是否使用history router,其实直白来说就是是否路径带 # 号,建议选择 n,否则服务器还要进行配置

2.3 选择css 预处理器

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的,dart-sass需要保存后才会生效

2.4 选择Eslint代码验证规则

接着选择 ESLint 代码校验规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多

2.5 选择什么时候进行代码规则检测

接着让你选择什么时候进行代码规则检测:

( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查

建议选择保存就检测,等到commit的时候,问题可能都已经积累很多了。

2.6 选择如何存放配置

接着选择某些配置文件是独立存放到文件中,还是全部存放到package.json,我们这里建议第一个

> In dedicated config files // 独立文件放置
  In package.json // 放package.json里

2.7 是否保存当前配置

最后就是选择是否保存刚才所选的配置,以便下次创建其他项目,就不需要再重新一个个去选择了,我们这里选择y,就会让我们输入保存配置信息的名字

那么我们保存后,配置到底是保存到了哪个文件夹?

回答:是放到了我们用户目录下的.vuerc文件下,我们切换到用户目录,使用命令cat .vuerc,

配置信息如下:

{
  "useTaobaoRegistry": true,
  "latestVersion": "4.5.13",
  "lastChecked": 1626320210348,
  "presets": {
    "testVueCli": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        }
      },
      "vueVersion": "2",
      "cssPreprocessor": "dart-sass"
    }
  }
}%

这里就是我们刚才设置的配置信息,如果我们想把配置删除,只需要把presets中的信息删除即可

3.项目的配置图

这里展示我们刚才所填的所有选项的图片

4.项目创建完成

最后出现以下红框内的successfully就代表我们通过vue-cli脚手架,创建项目成功了

5.输入npm run serve启动项目

项目创建完成后,项目目录如下:

我们直接进入package.json中,我们直接点击serve左边的启动按钮,点击run servewebstorm会自动帮我们启动项目

启动完成后,控制台会出现如下画面

我们点击http://localhost:8080/,我们就会在网页上看到首页了

6.项目结构解析

我们创建完项目后,必须知道项目的整体结构、项目的每个文件夹和文件是做什么的,接下里详细介绍下项目结构配置:

项目结构配置:

node_modules

里面存放了项目需要的各种环境依赖包

public

public里面存放一个网站标签favicon.icoindex首页,以后打包时,会把这些文件原封不动的打包到dist文件夹下

src

我们前端写的源代码都会在这个文件夹下

.browserslistrc

这个文件是对浏览器的一些配置,文件里的内容如下

> 1%
last 2 versions
not dead

一般不需要做修改

.eslintrc.js

代码风格检测,如果我们在其中配置了一些代码规则,我们写代码时出现不符合规则的代码,编译时就会报错

.gitignore

这个文件是使用git上传时,对某些文件忽略,内容如下:

Dockerfile
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

如果你把整个项目上传到git服务器,那么以上后缀的文件都不会进行上传

bable.config.js

bable进行配置的文件,一般不做修改

package.json

整个项目对包的配置,都在这里面,还包括了启动项目命令等等

到此这篇关于vue-cli创建项目及项目结构解析 的文章就介绍到这了,更多相关vue-cli创建项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-cli3.X快速创建项目的方法步骤

    1.安装 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过以下方式先卸载它: npm uninstall vue-cli -g # 或 yarn global remove vue-cli vue-cli 3.x安装: npm install -g @vue/cli # OR yarn global add @vue/cli 说明:-g / global 表示全局安装. 安装完成后可通过以下

  • 详解使用vue-cli脚手架初始化Vue项目下的项目结构

    vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加载的测试服务器 vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具 安装 下面来安装

  • 使用vue-cli创建项目的图文教程(新手入门篇)

    本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间. 使用npm 与vue-cli 构建vue 项目 第一步:安装运行环境(node与npm) nodeJ官网:http://nodejs.cn/下载安装包( 安装) 安装完成后,需要检测是否安装成功 使用命令行cmd 打开dos 黑窗口,运行 node -v 和 npm –v,出现版号说明安装成功 注(npm 是node自带的,在安装node时已经安装了) 如何升级npm 的版本

  • 使用vue-cli创建项目并webpack打包的操作方法

    1.准备环境(nodejs下载和设置环境变量) 2.全局安装vue-cli,提供vue命令进行创建vue项目 npm install -g @vue/cli 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它. 3.创建一个基于 webpack 模板的新项目(先新建项

  • 用npm安装vue和vue-cli,并使用webpack创建项目的方法

    一.npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g 二.在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ cnpm install vue 三.Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ v

  • 解决vue-cli创建项目的loader问题

    在使用vue-cli项目创建项目中,使用sass等预编译css语言时,不需要在config中配置,只需要在项目中安装相应loader即可. 例如: 1.在项目中使用sass $ npm i node-sass -D $ npm i sass-loader -D 2.当使用vuex时,即使安装vux和vux-loader,在项目中使用了vux的组件,项目就无法启动,报错如下: These dependencies were not found: * !!vue-style-loader!css-l

  • Vue使用vue-cli创建项目

    本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下: vue-cli 是一个官方发布vueJS项目脚手架:https://github.com/vuejs/vue-cli 我创建的模板项目:https://github.com/Aleczhang1992/my-vue-project/tree/dev 一.步骤 1.要求已安装Node.js (>=4.x, 6.x preferred) and Git. 可以设置cnpm可以提升依赖包下载速度: npm install -g cnp

  • 五分钟教你使用vue-cli3创建项目(新手入门)

    目录 一.搭建vue环境 二.Vue脚手架工具 三.创建项目 四.选择manually select (enter键确认,并进入下一步) 五.选择完成之后回车 这里我们选择3.x的 六.完成之后回车 出现以下界面 七.回车 出现以下界面 八.回车出现以下界面 九.回车出现以下界面 十.回车出现以下界面 十一.回车出现以下界面 十二.根据提示,启动项目 一.搭建vue环境 安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版,稳定

  • Vue-cli创建项目从单页面到多页面的方法

    对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm install glob --save-dev 2.修改build下的文件 (1)修改webpack.base.conf.js 添加以下代码: var glob = require('glob'): var entries = getEntry('./src/pages/**/*.js') 将module.exports中的 entry:

  • vue-cli入门之项目结构分析

    前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli项目,那么接下来,我们来梳理一下vue-cli项目的结构. 总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 文件结构细分 1.build--[webpack配置] build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是

随机推荐