我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

上一篇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文件夹下

class="lazy" data-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创建项目内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue-cli是什么及创建vue-cli项目的方法

vue-cli是vue官方提供的、快速生成vue工程化项目的工具,支持创建vue2和vue3的项目,本文给大家详细讲解vue-cli是什么及创建vue-cli项目的方法,感兴趣的朋友跟随小编一起看看吧
2023-05-16

如何用Vue-cli来构建Vue项目

这篇文章给大家介绍如何用Vue-cli来构建Vue项目,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。首先需要安装Vue-cli:npm install -g vue-cli全局先安装Vue-cli,安装好了Vue-cl
2023-06-22

vue-cli脚手架创建项目遇到的坑及解决

这篇文章主要介绍了vue-cli脚手架创建项目遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-11

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

这篇文章主要介绍“vue-cli创建项目的loader问题怎么解决”,在日常操作中,相信很多人在vue-cli创建项目的loader问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue-cli创建
2023-07-04

vue-cli创建项目ERROR in Conflict:报错怎么解决

本文小编为大家详细介绍“vue-cli创建项目ERROR in Conflict:报错怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue-cli创建项目ERROR in Conflict:报错怎么解决”文章能帮助大家解决疑惑,下
2023-07-05

编程热搜

目录