【Web - 框架 - Vue】随笔 - Vue CLI - 快速上手

已于 2024-03-09 18:56:01 修改
阅读量1.2k 收藏 15
点赞数 9
文章标签： 前端 vue.js javascript node.js
于 2024-03-09 18:44:16 首次发布
SUNxRUN
本文链接：https://blog.csdn.net/HIGK_365/article/details/136588716
版权

Vue CLI

创建Vue CLI项目

【步骤】

  1. 命名项目空间：在电脑里创建文件夹，用于存储所有项目；
  2. 定位项目空间：在"CMD窗口"里定位到工程的项目空间上；
    • 方法1：(a)用"WIN+R"打开运行窗口，输入"CMD"进入"CMD窗口"；(b)输入项目空间所在盘符(如"f:")后回车；©输入"cd 根目录路径(可拖拽文件夹到CMD窗口)"后按"enter"键即可；
    • 方法2：(a)打开项目空间所在文件夹；(b)"ALT+D"输入"CMD"后按"enter"键即可；
  3. 创建项目第一步：在"CMD窗口"输入"vue create 项目名称"后按"enter"键后等待跳转即可(像是卡住了,是在加载,一定不要多次按空格)；
  4. 创建项目第二步：用"↑"键和"↓"键进行选择，选择选项(“Manually select features”)后按"enter"键进入下一页面；
  5. 创建项目第三步：用"↑"键和"↓"键选择，"space"键修改，选"Babel"、"Router"、"Vuex"后按"enter"键进入下一页面；
  6. 创建项目第四步：选"2.x"后按下回车，出现"(Y/n)"继续按"enter"键进入下一页面；
  7. 创建项目第五步：出现"？Where do you prefer placing config for Babel,ESLint,etc.?(Use arrow keys)"(翻译：你要将文件放到哪里?)，选择第二项("In package.json")后按"enter"键，出现"(y/N)"，继续按"enter"键即可；
  8. 加载相关的文件：此时会自动加载相关文件，加载完毕后出现"Successfully created project 项目名称."则表示项目创建成功；

【注意】

  1. 相关的文件最好不要有中文和空格；
  2. 出现"error"相关，关掉重来试试；

启动Vue CLI项目

【步骤】

  1. 用软件"IDEA"打开 "node.js"创建好的项目；
  2. 在软件左下角找到"Terminal"选项卡并打开；
  • 若定位是在项目的根目录上则进行下一步；
  • 若没定位在项目的根目录上定位后下一步；
  1. 输入"npm run serve"后回车，等待加载即可；
  2. "Compiled successfully in XXXms"代表成功；

【说明】

  1. 启动Vue ClI项目也可通过"CMD窗口"这样的方式来完成；
  2. 启动成功的提示还包括"http://localhost:8080"这样的网址；
  3. 在CMD 窗口中，按下"Ctrl + C" 即可停止已启动的项目；

解析Vue CLI项目

文件夹：.idea

【说明】：软件"IDEA"管理项目时自动生成的，可以无视；

文件夹：node_modules

【说明】：当前项目所需的依赖项(自己不要操作)；

【注意】：

  1. 此文件夹不会提交到git，若需要的话用以下方式下载；
  2. 若没有\缺失，可以在"Terminal"输入"npm install"来下载；

文件夹：public

【说明】：

  1. 是当前项目启动后的根路径，可存放各种资源（如.css、.js、.jpeg）；
  2. 若此文件夹下有"1.jpg"，则可通过"http://loaclhost:8080/1.jpg"查看；
文件：favicon.ico

【说明】：项目的图标，每个项目在(编译后的)根目录下有此文件，会在浏览器中显示；

文件：index.html

【说明】：当前项目的页面，在"Vue CLI"项目中有且仅有一个"HTML页面"；

文件夹：src

文件夹：assets

【说明】：资源文件夹，用于存放静态资源(如 .css、.js、jpeg)

【注释】：反正就是存放不随程序运行而变化的文件(如：logo.png)；

文件夹：components

【说明】：存放视图组件(被其他视图组件调用的)，是可能被复用的组件，并且在不同的调用中，传入的参数可以不同；

文件夹：router
文件：index.js

【说明】：路由配置文件，主要配置访问路径与视图组件的对应关系；

文件夹：store
文件：index.js

【说明】：存储共享的量的文件；

文件夹：views

【说明】：用于存放视图组件；

文件：APP.vue

【说明】：是"index.html"默认加载的视图文件；

文件：main.js

【说明】：当前项目的主".js"文件，通常用于管理一些配置；

【注释】：如：添加了某些依赖项(如:Element UI)后，可能需要在此处导入，才可以使得各".vue"文件可以使用这些依赖项；

文件：.gitignore

【说明】：用于配置哪些文件和文件夹不会提交到"git"，如果此项目不提交到"git"，则此文件没用；

文件：babel.config.js

【说明】："Babel"的配置文件，通常不用关心(不需要操作)；

文件：jsconfig.json

【说明】：".js"文件的配置文件，通常不用关心(不需要操作)；

文件：LICENSE

【说明】：许可证协议文件，默认的项目中通常没有此文件，在"git"上公开的项目通常都包含此文件；

文件：pakcage.json

【说明】：主要配置当前项目的依赖项和项目的编译打包等配置，通常不建议手动修改；

文件：package-lock.json

【说明】：自动管理的配置文件，通常不建议手动修改；

文件：README.md

【说明】：此项目的说明文件，如果此项目提交到"git"，通常会显示在"git"的此项目的主页；

【注释】：通常应该在此文件中对项目进行必要的描述(如何配置此项目、如何启动此项目、相关的注意事项等)；

文件：vue.config.js

【说明】：".vue"文件的配置文件，通常不用关心(不要操作)；

使用Vue CLI项目

.vue文件相关

【说明】：

  1. .vue文件的源代码可以由3大部分组成：(a).页面设计<template>；(b).样式<style>；©.脚本<script>；
  2. 这3大部分并不都是必须的，例如某个.vue没有<script>也是完全正常的；

【<template>】：

  1. 其直接子标签必须有且仅有一个；
  2. 在其子级里如果出现了<router-view/>，表示此区域将由另一个视图文件来负责设计；
  3. 至于是哪个视图，取决于"router/index.js"中的路由配置；

关于路由的简单配置

【说明】：

  1. router下的index.js文件是用于配置路由的，在此文件中有一个"routes"常量，其属性值是一个对象的数组；
  2. 数组元素中，可以有三个属性：
    • path：路径（不可重复）；
    • name：自定义名称，此属性可不配置；
    • component：路径对应的视图组件(某个.vue文件加载得到的对象)，有两种加载方式：1.在当前文件的起始位置通过"import"语法静态导入(默认导入)；2.在此"component"属性值位置使用箭头函数结合"import"函数进行导入；
  3. 当显示的视图组件中使用到了<router-view />时，将根据当前访问的URL（浏览器中的路径）来决定显示哪个视图；

【例子】：

import HomeView from '../views/HomeView.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('../views/AboutView.vue')
    }
    ]

Vue CLI的嵌套路由

【场景】：在开发实践中，一个项目中，可能存在这样的情况：

  1. 部分页面完全没有共用的部分，所以，在App.vue中，要仅保留一个<router-view/>标签；
  2. 但仍有部分页面存在共用的部分，所以，在其它.vue文件中，也可能需要再次使用到<router-view />；
  3. 具体表现为在App.vue中只有<router-view/>，则此处实际显示的就是另外某个.vue了，但是在这些其他的.vue中也会用到<router-view/>，即出现了“嵌套”；

配置相关文件

【步骤】：

  1. 打开CMD/终端窗口并且定位到当前项目的文件夹；
  2. 输入"npm i 需要的配置 -S"按下回车 , 静待即可；
  3. 出现"added ‘数字’ packages in '数字’s"表示成功；

Element UI

【1】安装Element UI

npm i element-ui -S

【2】配置Element UI

位置："src/main.js"；

内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

【3】检查Element UI

说明：

  1. 在"package.json"文件中查看是否有相关依赖("'element-ui':'^2.15.9")；
  2. 若有，但不能用，则删掉"node_modules"，重新下载即可；

Axios

【1】安装Axios

npm i axios -S

【2】配置Axios

位置："src/main.js"；

内容：

import axios from 'axios'
Vue.prototype.axios = axios

说明：

  1. 需要注意，目标服务器可能是禁止跨域访问的（错误提示中有CORS字样），在Spring Boot工程中，可以使得启动项目的类实现WebMvcConfigurer接口；
SUNxRUN
关注
  • 9
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue-web-component：使用Vue CLI 3构建的示例Web组件
02-06
@quannt在vuejs中内置的示例Web组件 该小部件是使用并使用编译成一个Web组件。 最终的构建文件位于dist文件夹下。 您可以从localhost提供index.html来查看运行中的小部件。 构建设置 # install dependencies $ ...
admi后台 vue_Vue+ElementUI的后台管理框架
weixin_28930033的博客
12-28 422
新开发的一个后台管理系统。在框架上，领导要用AdminLTE这套模板。这个其实很简单，把该引入的样式和js文件引入就可以了。这里就不多赘述了。有兴趣的可以参考：https://www.jianshu.com/p/e80b1f5001eb，或者可以参考官网：https://adminlte.io/效果图，如下：AdminLTE这个模板，还是很方便的。有兴趣的大家可以自行去琢磨。我只是把这个模板内嵌到...
vue随笔
manyi8634的博客
04-12 1430
VUE 引导 官网 封装 VS 库 VS 框架 封装通常指一小部分通用业务逻辑，多个封装形成一个模块或者文件，多个模块或者文件就发展成为库或者框架，而插件是为库或者框架发布后做后期补充，可以有官网或者第三方提供的，有点外挂的意思，有时候一个模块就是一个文件，有时候一个文件里面有多个模块，把不同的文件按类别放置到不同的目录里，这个目录叫做包，框架改变了编码思想，库只是个工具你用或者不用不会影响你的编码思想 编码思想 jquery你用或者不用，你的编码思想都会是面向事件，开发一款插件中间用到什么库不重要，你会面
while[0 -gt 0]: 未找到命令_Vue3.0学习手册系列文章-入门篇
weixin_39946313的博客
12-12 221
简介当你阅读完引子的时候，在我看来你对一些Vue3.0的新特性已经回迫不及待了吧。那么就跟随一起来看下充满魔法的CompositionAPI究竟充满哪些神奇的体验呢。下面罗列出官方三种体验Vue3.0的方式给大家选择。我个人推荐Vite它提供了开箱即用一些配置，和非常快的速度。VueCli：官方脚手架，通过vue add vue-next即可体验。Vite：同样为官方提供，通过yarn creat...
Element-UI工具使用随笔
Yuan_hongbao8888的博客
09-13 193
Vue中常用的UI框架 PC ： Element-UI , iView M站(移动端) ：Vant Vue-Cli版本 2.x : 老版本 3.x : 主要版本 【注意】vue的工具是3.x版本，并非vue是3.x版本，目前vue任然还是2.x版本 Element-UI 打开element-ui的快速上手，找到打开里边的Element插件，跳转到github上。 第一步 ：Vue安装element插件 命令 : vue add element(不需要npm)会出现两个选项 Fully imp..
Vue随笔
Yuan_hongbao8888的博客
09-12 187
Vue 是一套构建用户界面的渐进式框架，与其他框架不同的是，Vue可以自底向上逐层应用。Vue的核心库只关注视图层易于上手，还便于与第三方库或既有项目整合。兼容性：Vue不支持IE8及以下版本，因为Vue使用了无法模拟的ES5特性，但它支持所有兼容ES5的浏览器。 Vue虽然没有完全遵循MVVM模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。 开发者工具：再使用Vue时，推荐再浏览器上安装Vue Devtools。它
vue.js - 收藏集 - 掘金
weixin_34413357的博客
06-16 515
手摸手，带你用vue撸后台 系列一 - 掘金项目地址 前言 说好的教程终于来了，第一篇文章主要来说一说在开始写业务代码前的一些准备工作吧，但这里不会教你webpack的基础配置，热更新怎么做，webpack速度优化等等，有需求的请自行google。 目录结构 ├── build ... vue 全家桶 SPA 前后分离的图文多人 blog...
vue(8) - 收藏集 - 掘金
weixin_34162228的博客
05-12 596
2017 百度前端技术学院——vue 源码分析之动态数据绑定一 - 前端 - 掘金一、Object.keys() Object.keys()方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用(for in)循环遍历该对象时返回的顺序一致 (顺序一致不包括数字属性)（两... [[Vue 2] 新版...
vue(9) - 收藏集 - 掘金
weixin_34249678的博客
05-12 1042
Vue.js 自定义指令的用法与实例 - 前端 - 掘金市面上大多数关于Vue.js自定义指令的文章都在讲语法，很少讲实际的应用场景和用例，以致于即便明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。... Vue中你不知道但却...
001-基础知识
loveEveryWeb的博客
08-23 241
Vue 随笔 -- 基础知识Vue 简单介绍Vue 引入Vue 内置指令Vue 自定义指令Vue 最常用的生命周期函数data & 过滤器 & 计算属性axios国际化： vue-i18n总结 Vue 简单介绍 Vue 作为目前最受欢迎的前端框架，上手难度低，采用 axios 作为前后台交互方式，Vue-router 作为路由，vuex 管理数据流，Vue-i18n 进行语言切换，拥有生命周期、及组件系统，采用 webpack 全家桶打包优化性能，结合 UI 框架 elementUI，让前端
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
vue-cli-plugin-multiple-page 一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请...
vue使用vue-cli快速创建工程
01-19
本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下： vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue ...
使用Vue-cli 3.0搭建Vue项目的方法
01-21
1. 环境准备 1.1. 安装Node.js （建议使用LTS版本） 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls ...1.4. 安装vue-cli 3
vue3中的reactive和ref
weixin_43784341的博客
05-08 490
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
web server apache tomcat11-32-rewrite
05-06 832
整理这个官方翻译的系列，原因是网上大部分的 tomcat 版本比较旧，此版本为 v11 最新的版本。重写阀门实现了 URL 重写功能，与 Apache HTTP Server 中的 mod_rewrite 非常相似。
根据地址栏url上key获取值
wwf1225的博客
05-10 150
/ 根据url上key获取值，key为参数名字，例如token。
Android WebViewJavascriptBridge JS层调用Native层流程解释
最新发布
zhanghao_Hulk的专栏
05-11 140
在android开发中，存在Android的原生Native层与JS网页混合开发的需求，此时可以使用WebViewJavascriptBridge框架进行桥接，实现JS与Native层相互通信。 下面对WebViewJavascriptBridge框架的实现流程做简单解释：
serve vue-cli-service serve build vue-cli-service build lint vue-cli-service lint
09-08
具体来说，vue-cli-service serve用于在开发环境下运行项目，vue-cli-service build用于打包项目，vue-cli-service lint用于检查项目代码风格。这些命令是在项目的package.json文件中定义的脚本。例如，可以通过运行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SUNxRUN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值