vue-cli搭建vue项目

最新推荐文章于 2020-10-31 23:04:27 发布
最新推荐文章于 2020-10-31 23:04:27 发布
阅读量246 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zemprogram/article/details/93056132
版权

在搭建项目时，需要编译babel，ts，less/sass，es6，使用webpack来配置项目虽然可以达到想要的效果，但是每次搭建项目时重复地搭建会浪费很多时间，在搭建vue项目时，使用vue-cli脚手架可以快速搭建响应式开发的demo。

使用vue-ui创建

输入vue ui

自动跳出一个图形化界面，点击左上角下箭头，然后点击项目管理器

会出现已经创建过的项目，点击创建创建新的项目

输入文件夹名字，点击下一步

选择预设要配置的插件，这里为了方便直接选择默认，然后点击创建项目

等待项目的创建

大功告成

使用命令行创建

vue create <目录名>

若是在当前目录下创建直接加.

选择Y则表示在当前目录下创建，N则返回原命令行

这里配置对应的插件，直接回车使用默认

等待框架搭载

npm run serve启动

这里的local就是我们打开项目的地址

 

前端小黑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手教你用vue-cli搭建vue项目
04-07
### 手把手教你用vue-cli搭建vue项目 在前端开发领域，**Vue.js**作为一款轻量级且功能强大的框架，被广泛应用于构建用户界面。本文将详细介绍如何使用`vue-cli`工具快速搭建一个Vue项目，并对项目结构及常用配置...
基于vue-cli搭建多模块且各模块独立打包的项目
10-16
本文详细介绍了如何利用vue-cli工具搭建一个多模块、且每个模块都可以独立打包的Vue项目。在当前的前端开发实践中，随着项目规模的扩大和业务的细分，模块化开发已经成为主流。本文的知识点覆盖了如何通过项目配置和...
详解Vue使用 vue-cli 搭建项目
01-19
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli  一、 安装 node.js 首先需要安装node环境，可以直接到中文官网...
基于Vue-cli快速搭建项目的完整步骤
12-09
前言 vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。...二、vue-cli快速搭建项目 安装完成后，同时在
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
在使用Vue-cli搭建项目时，遇到引入css文件报错的问题是非常常见的。本文将详细介绍这种问题的原因分析和解决方法。 问题描述 在使用Vue-cli搭建的项目中，我们经常需要引入css文件，例如引入ElementUI库中的css...
vue 问题笔记 ref获取不到指定的DOM节点问题解决
热门推荐
zem
07-13 3万+
在vue中不建议操作DOM，但是如果我们在没办法的情况下，可以通过ref来进行DOM操作，而在使用DOM时，可能会有获取不到ref对应DOM节点的问题 像下面这种情况，这是执行了console.log(this.$refs)的情况 在用console打印出来的时候明明看到可以按下箭头显示我们要的组件内容，但是在花括号里面却写的是undefined，此时如果要获取这个节点的属性值，会报无法从...
vite学习之路（一）初识vite，vite的使用与工作机制
zem
10-31 3万+
最近闲下来后开始整理之前的知识了，早在vue3.0正式出来之前，尤大就已经提到了做了一个新的web应用开发工具vite 解下来的几篇文章我会对vite的使用，到与webpack（其实应该是webpack-dev-server，后面会解释为什么）的比较，以及源码解析，简单地实现vite部分功能来写，欢迎大家在评论区提出各种建议问题 那么话不多说，开始vite学习之路 vite是什么 首先，vite为什么叫做vite，vite实际上是法语中快的意思，所以顾名思义，这个工具给我们带来的就是更快的开发体验，它实际上
Vue 问题笔记 vue-router单页面应用跳转路由时触发事件
zem
07-13 1万+
在使用vue-router时，我们可以很方便地实现单页面应用，当我们想要跳转到“另一个页面”的时候，只要调用vue-routerAPI中的方法，传入相应的路由作为参数即可。 单页面应用的一个特点是，如果某个路由已经在本地加载过了，即已经将生命周期走到了mounted的时候，如果我们再进入这个页面，不会再执行created和mounted里面的方法。 简单来说，有两个页面A和B，我们使用单页面的...
Vue学习笔记---Vue单文件组件（SFC）规范
zem
08-03 9195
.vue文件用于表示一个单一组件，其内使用类html语法，顶级标签有template,script,style和自定义的标签，一个完整简单的vue单文件如下 <template> <div class="example">{{msg}}</div> </template> <script> export default { ...
vue loader配置及对vue文件（vue单文件组件）的处理
zem
08-03 6612
通常情况下，我们会使用vue cli直接创建一个项目的脚手架，如果我们要自己用webpack来配置vue项目的话，就要用到vue loader vue loader的配置 处理资源路径 使用预处理器 ...
Vue3.0都快发布了，还不看看Vue和React的区别
zem
05-01 5278
现在常用的三大框架中，常常会拿Vue和React来做比较，上周尤大又开了个Vue3.0beta的直播，所以就想着写篇两者比较的博客，拖着拖着拖到五一，总算整出来了。 实际上之所以会想去写这篇文章，也是尤大在直播里提到了好几次React的内容，在更新Vue3.0上参考了很多React的功能，而之前虽然学过React，但也就只是做个todo-list玩玩而已，没做过实际的项目，所以也借此来熟悉一下Re...
vue配置多页面
zem
07-04 4005
vue-cli构建项目初步目录 在test项目根目录下创建vue.config.js来修改配置 vue.config.js内容 module.exports = { pages: { index: { // page 的入口 entry: 'src/page/index/main.js', ...
Vue双向绑定原理 从vue2的Object.defineProperty到vue3的proxy
zem
12-05 2061
在网上查找资料的时候，看到很多关于Vue双向绑定的文章都直接说是通过Object.defineProperty实现的，但我隐约记得去年看过尤大的视频，记得好像是用proxy实现的，所以又好好找了一下，果然，在vue3.0中，已经改用proxy实现了 双向绑定的简单思路 在谈论vue2和vue3中各自的双向绑定形式前，我们先了解一下基本的思路 要做到双向绑定，即是在我们修改数据时，视图发生变化，而...
vue中修改数组内容视图没有发生更新问题源码解析
zem
09-13 1698
改变数组长度无法触发视图更新 在vue中，我们可能会有这种情况，修改了数组的长度，但是视图没有发生更新 <template> <div id="app"> <div v-for="(item,index) in arr" :key="index"> {{index}}:{{item}} </div> <button @click="click">btn</button> &lt
手动实现vue v-指令编译，双向绑定功能的详细步骤
zem
01-29 1109
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。 把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model 在vue中，MVVM的体现就是双向数据绑定，而双向的数据绑定又是我们面试中...
vue中使用axios的踩坑记录
zem
09-07 955
axios跨域 在自己写的一个项目中，想要直接将学号和密码发到学校的教务系统，结果跨域了。。。。。。 原代码 // url为要访问的域名 axios.get(`${url}?method=authUser&xh=${this.sNo}&pwd=${this.password}`) .then((res) => { // ... }).catch((err) =&gt...
vue学习笔记---Scoped CSS和CSS Modules基本使用及比较
zem
08-04 896
Scoped CSS和CSS Modules都是对vue单文件组件中的style标签的一种修饰，使我们能更好地处理不同情况下的样式使用 Scoped CSS 使用 Scoped CSS的使用只需要在style标签上添加scoped即可 <template> <div class="example">hello world</div> </templat...
Vue学习笔记（八）插槽
zem
04-03 748
在使用组件时，组件开始标签和结束标签的内容会被忽视，如下代码 <div id="app"> <my-com>I want to be shown</my-com> </div> <script> Vue.component("myCom", { template: "<h1>this is...
vue学习笔记 解析diff算法
zem
09-29 738
在vue中，DOM被抽象为一个以JavaScript对象为节点的virtual DOM(虚拟DOM)树，当数据发生改变时，会通过修改virtual DOM，使用diff算法，修改局部的内容，然后将这部分内容以打补丁的方式来修改真实的DOM，来达到视图修改的作用。 因为通过diff算法，能得出需要修改的最小单位，所以我们在更新视图的时候，只需要修改这些最小单位，这么做减小了更新的消耗。 diff算法...
描述使用vue-cli搭建vue项目的过程
最新发布
04-02
1. 安装node.js ... 2. 安装vue-cli 打开命令行工具，输入命令：npm install -g vue-cli 等待安装完成后，输入命令：vue -V，查看vue-cli版本号，以确保安装成功。...以上就是使用vue-cli搭建vue项目的过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值