最新【vue】使用vue-cli5.0快速搭建一个项目

简介: 最新【vue】使用vue-cli5.0快速搭建一个项目

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:


  • 通过 @vue/cli 实现的交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service),该依赖:
  • 可升级;
  • 基于 webpack 构建,并带有合理的默认配置;
  • 可以通过项目内的配置文件进行配置;
  • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。


概述


  • 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
  • 在vue的spa中,需要编写vue文件。
  • Vue提供单文件组件(扩展名为 .vue的文件),每一个vue文件由3部分组成:
  • 模板(html代码):模板(html代码):<template>

脚本(js代码):<script>

样式(css代码):<style>

就是只有一张HTML页面 所有的页面跳转都在这个HTML里面 局部刷新


使用vue cli构建项目


       1.安装node.js 安装vue.cli 必须先安装node.js


       node.js安装参考:


  • image.png     2.安装vue cli


npm install -g @vue/cli


       3.创建项目


vue create 项目名


       4.根据需求进行选择


               步骤1:在这里选择手动配置?微信图片_20220523231743.png

  步骤2:上下键控制 空格选择 这里选择Babel转码器 Router Vuex微信图片_20220523231751.png

 ? 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) 测试 

步骤3:选择版本 2.x微信图片_20220523231804.png步骤4:是否开启history模式 选择否微信图片_20220523231811.png 步骤6:选择你想把你的配置文件放在一个独立的配置文件中?还是放到package.json中?

       选择package.json即可 没多大区别

微信图片_20220523231816.png 步骤7:询问你是否保存以上设置 方便下次选择 这里选择 否 如果选择是 下面还要给你的配           置 取个名字

微信图片_20220523231824.png  步骤8:cd 进入项目 npm run serve 启动项目

 

       步骤9:出现两个地址  按住Ctrl键 点击  出现下面页面 项目创建成功微信图片_20220523231840.png微信图片_20220523231846.png 

目录结构


1. 主要目录结构


  1. 入口页面:程序显示的第一个页面
  2. 页面目录:用于存放“功能页面”。
  3. 路由目录:用于给“功能页面”配置访问路径微信图片_20220523231855.png
  1. 其他目录结构

 微信图片_20220523231902.png

入门案例:Vue文件


       需求:访问/test-------Test.vue页面

  • 步骤1:编写Test.vue页面
<template>
  <div>
      这是一个测试页面
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>
  • 步骤2:在路由定义Test.vue路径
  {
    path: '/test',
    name: 'testName',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test.vue')
  }.

微信图片_20220523231915.png  步骤3:在App.vue编写Test.vue访问路径

<router-link to="/test">测试页面</router-link>

微信图片_20220523231920.png   步骤4:访问Test.vue

微信图片_20220523231927.png

常见问题


  1. 创建vue项目时,提示禁用的脚本微信图片_20220523231932.png1.需要操作:

管理员身份打开PowerShell微信图片_20220523231937.png

1.运行命令set-ExecutionPolicy RemoteSigned

2.输入 Y 回车微信图片_20220523231943.png

看了vue cli的安装方式总结一下。如有不多请多多指教!希望给您带来帮助!

 vue-cli参考文档:image.png

相关文章
|
6天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
51 1
|
17天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
48 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
34 1
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
35 1
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
36 1
|
2月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能

热门文章

最新文章