vue 前期准备,项目结构

环境

1、node -v 检测
      没有就下载node,装到C盘           http://nodejs.cn/download/      
2、vue -v 检测 
      没有就 npm install -g @vue/cli 或者 yarn global add @vue/cli   安装脚手架
       网址 https://cli.vuejs.org/zh/  也可以从网址里找到安装命令
3、之后就可以使用vue ui 或者 vue create 项目名称——创建项目(建议vue ui,看着方便)

 

 

 

 

 图片中省略的部分就是不用设置

4、之后就可以npm run serve 打开项目了(要在项目这个文件夹中使用指令)

## 包管理工具  (包等于插件vue,echars)

 npm

npm 是nodejs软件自带的一个包管理工具,由于是外国人写的,它默认下载文件的地址是国外的,所以很慢,修改成国内的下载地址 npm淘宝镜像

检测:`npm config get registry`

 yarn

安装:https://yarn.bootcss.com/docs/

yarn 必须基于nodejs运行。属于第三方的下载包的管理器

优点:比npm快很多 

【注意】两者只能用一个,下载依赖的时候只能用一个,启动项目或打包的时候没有区别。

### npm和yarn 的常用命令

#### 初始化安装依赖

项目里必须由package.json文件

- yarn install

- npm i `#` install缩写 i

-  从线上拿到的项目没有node_modules包,就需要初始化

【注意】cmd窗口如果停止下载了。鼠标点击窗口敲回车

#### 初始化npm环境

- npm init -y

#### 安装依赖

- npm i pageName

- yarn add packName

### 卸载包

- npm uninstall packName

- yarn remove packName


 

### 依赖包的环境

环境=== 范围=== 作用域

全局安装依赖的命令

#### 全局环境

举例` npm i - g jquery`

#### 开发环境   npm run serve

编译scss的,编译es6的babel,编译vue文件的loader仅仅用于开发环境,浏览器里是用不到的,我们使用- `D`安装

举例:`npm i -D scss scss-loader`

#### 生产环境   npm run build

- `S`表示生产环境

vue,jquery,axios,ajax等都是运行在浏览器中的,需要


 

## 项目创建

nodejs+vue+cli环境准备好了后,可以创建项目了

### 使用图形化创建

`vue ui`

### 使用命令行创建

`vue create name`


 

### 安装scss

npm i -D sass sass-loader

yarn  add -D sass sass-loader

// 卸载
npm uninstall --save sass-loader
// 安装
npm install -D sass-loader@7.x
 



 

# 项目结构

- node_modules 项目运行时需要的所有依赖(可以删除,只要有package.json就可以重置)

- public 公共目录,打包的时候就原格式输出,里面存放的是单页面html和网站的icon

- src 【重要】

  源码,必要的文件main.js,是入口文件,全局文件,项目运行是执行的第一个文件

- package.json【重要】

  运行命令和所有依赖清单文件

- gitignore 过滤git储存的清单,不想让某个文件存入git仓库,就把他写在清单里

- bable.config.js 把es6语法编译成es5 

- README.md 项目描述文件

- vue.config.js 对当前项目vue脚手架的扩展

  功能:打包的二级目录 ,利用nodejs做跨域请求proxy,关闭打包时的代码映射文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何设计一个复杂的业务系统?从对领域设计、云原生、微服务、中台的理解开始

简介:业级应用架构是在不断的演进和迭代,但是我始终感觉企业应用架构的形成过程是在一种看起来科学的方法论下,但是又不完全科学的过程中实现的。 作者:焦方飞 大年初一,看完中国队 1:3 越南队的比赛,在思…

构建、运行、增长,亚马逊云科技发布游戏行业解决方案

云计算除了为游戏提供底层基础设施的IT资源,还能做什么? 编辑 | 宋慧 出品 | CSDN云计算 在全球游戏发展重塑的过程中,中国已经成为全球最大的数字游戏市场,Data.ai发布2022年Level Up全球52强排行榜里,有17家游戏和公…

如何从容应对复杂性

简介:软件的复杂性,是一个很泛的概念。但是一直都是开发过程中的一个难题,本文旨在探讨如何去从容应对复杂性。 作者 | 無涯 来源 | 阿里技术公众号 软件的复杂性,是一个很泛的概念。 但是一直都是开发过程中的一个难题&#xf…

js判断数据类型的几种方式

typeof 对于基本类型,除 null 以外,均可以返回正确的结果。对于引用类型,除 function 以外,一律返回 object 类型。对于 null ,返回 object 类型。对于 function 返回 function 类型。 typeof; // string 有效 typeo…

阿里巴巴开源大规模稀疏模型训练/预测引擎DeepRec

简介:经历6年时间,在各团队的努力下,阿里巴巴集团大规模稀疏模型训练/预测引擎DeepRec正式对外开源,助力开发者提升稀疏模型训练性能和效果。 作者 | 烟秋 来源 | 阿里技术公众号 经历6年时间,在各团队的努力下&#…

产学融合如何促进技术创新,英特尔打了个样

作者 | 宋慧 出品 | CSDN 经过多年的积累与扎实科研,中国的科学与技术水平正在达到和超越世界一线水平。这离不开中国有基数庞大的用户和应用场景,为科学界和工业界提供了将理论付诸实践的机会,反复打磨迭代,以提升技术指标。 作…

3大能力升级,云效+钉钉,让研发协作更「敏捷」

简介:你的团队是否面临如下问题:没有敏捷经验,不知道如何落地敏捷或者敏捷实施不规范?研发交付过程信息更新不及时,无法及时跟进交付结果?员工入职离职,多套账号权限管理难?缺乏交付…

阿里云张献涛:自主最强DPU神龙的秘诀

简介:读懂云计算,才能看清DPU热潮。 微信公众号搜索“弹性计算百晓生”,获取更多云计算知识。 如果细数最近火爆的科技概念,DPU必然位列其中。 这是英伟达一手捧红的新造富故事,是2021年SoC领域最热火朝天的创业赛道…

Gartner发布2022年新兴技术成熟度曲线,推动沉浸式、AI自动化发展

编辑 | 宋慧 供稿 | Gartner Gartner 2022年新兴技术成熟度曲线列出了25项值得关注的新兴技术,这些技术正在推动沉浸式体验的发展和扩展、加速人工智能(AI)自动化并优化技术人员交付。 Gartner研究副总裁Melissa Davis表示:“新兴…

阿里云张献涛:公共云正不断向外延伸,一云多态是未来趋势

简介:一云多态是公有云的未来趋势,包括产品的多形态、部署的多形态和生态的多形态。 编者按:2021年10月22日,在云栖大会《一云多形态部署最佳实践》分论坛,阿里巴巴集团研究员、阿里云弹性计算产品线负责人张献涛发表…

4种典型限流实践保障应用高可用|云效工程师指北

简介:4种典型限流实践保障应用高可用,本文总结了一份AHAS限流实践指南,如果你的系统有被恶意用户攻击的风险,或者系统中某个应用出现异常可能会造成雪崩效应,那么这篇文章会对你有所帮助。 大家好,我叫黄博…

超融合中国力量崛起,IDC2022年Q1报告出炉浪潮中国市场位列前三

国际数据公司(IDC)发布《2022Q1中国软件定义存储及超融合市场研究报告》,报告显示:2022年第一季度浪潮超融合销售额同比增长86.3%,近8倍于业内平均增速,市场份额跻身中国前三。 浪潮超融合在政府和金融行业…

阿里巴巴云原生大数据运维平台 SREWorks 正式开源

简介:阿里巴巴云原生大数据运维平台 SREWorks,沉淀了团队近10年经过内部业务锤炼的 SRE 工程实践,今天正式对外开源,秉承“数据化、智能化”运维思想,帮助运维行业更多的从业者采用“数智”思想做好高效运维。 作者 | …

css小技巧

当文字超出时用胜率号代替 <p>这是一段超出内容的话&#xff0c;必须要超出才会出现省略号</p> p{width: 200px;height: 20px;line-height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }让文字的颜色为渐变 <p>我需要成为渐变色…

阿里云 VPC 内网性能测试最佳实践

简介&#xff1a;本文介绍了在阿里云 VPC 内网执行性能测试的方法。相较于传统的公网性能测试&#xff0c;VPC 内网性能测试完全在客户 VPC 环境进行&#xff0c;无需暴露服务到公网&#xff0c;安全性更高&#xff0c;灵活性更强。 作者:风起 背景 随着互联网的快速发展&am…

​在可视化大屏中轻松完成机器学习建模和调参应用实例

Streamlit 是一个开源 Python 库&#xff0c;可帮助开发人员为其系统创建交互式图形用户界面。它专为机器学习和数据科学家团队设计。使用 Streamlit&#xff0c;我们可以快速创建交互式 Web 应用程序并进行部署。前端工作对数据科学家来说并不重要&#xff0c;他们只想要一个小…

router的使用

路由和线路 路由router 表示当前项目全局的路由实例对象 跳转方法&#xff1a;push&#xff0c;replace&#xff0c;go&#xff0c;back 线路route 表示当前路由页面的信息对象 获取动态路由的参数&#xff1a;params router跳转的两种方式 js跳转叫[编程式跳转] <butto…

EventBridge 事件总线及 EDA 架构解析

简介&#xff1a;EventBridge 是事件驱动的具体落地产品&#xff0c;也是 EDA 的最佳实践方式。 作者&#xff1a;肯梦 作为 Gartner 定义的 10 大战略技术趋势之一&#xff0c;事件驱动架构&#xff08;EDA&#xff09;逐渐成为主流技术架构。根据 Gartner 的预估&#xff0…

开发者驱动的软件公司,如何赚取万亿美元?

【CSDN 编者按】在过去二十年中&#xff0c;诞生了两个价值数万亿美元的企业软件行业&#xff1a;SaaS&#xff08;Software as a Service&#xff0c;软件即服务&#xff09;软件和公有云。如今&#xff0c;第三个以开发者为核心的万亿美元软件浪潮正在来袭&#xff0c;企业该…

解决vue路由守卫报错信息

//在router文件中写入&#xff0c;修改报错信息 const originalPush VueRouter.prototype.push VueRouter.prototype.push function push(location, onResolve, onReject) {if (onResolve || onReject) {return originalPush.call(this, location, onResolve, onReject)}retu…