vue - cli 脚手架安装

一、 node安装

  1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本);

  2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/

注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;

 

二、 vue-cli 全局安装

 命令行执行 : npm install -g vue-cli    // 加-g是安装到全局

安装完成以后 可以输入命令 :vue 回车,可以看到针对vue的命令行;

 

三、初始化项目

执行命令: vue init webpack demo(你新建的项目名称/文件名称)

执行之后将会 自动初始化一个文件夹 :demo

手动打开demo文件夹 可以看到 已经初始化好了 一个基本的项目:

 

四、启动项目

npm run dev 启动项目

继续执行: cd demo (这是进入到demo文件夹的命令)

 然后执行 安装 :npm install

注: npm install 执行可以进行vue已经vue的插件安装,在第三步的时候,已经初始化了项目,并且在 package.json 里面已经有相关配置,所以在这里可以直接安装;

 安装完成之后再执行命令: npm run dev 

整个项目就已经启动了:

 

 

五、项目文件配置介绍

build 和 config  是关于webpack的配置,里面包括一些server,和端口;

node_modules: 安装依赖代码库;

src :  存放源码;

static:存放第三方静态资源的,static里面的.gitkeep,如果为空,也可以提交到gitHub上面,正常情况下,是不可以提交的。

 .babelrc:把es6文件编译成es5

.babelrc文件{"presets": ["es2015", "stage-2"],//表示预设,表示babelrc转换预先需要安装的插件"plugins": ["transform-runtime"],//把es6的方法做转换"comments": false  //false表示转换后代码不生成注释
}

.editorconfig:编辑器的配置
.editorconfigcharset = utf-8  //编码
indent_style = space //缩进风格,基于空格做缩进
indent_size = 2   //缩进大小是2格
end_of_line = lf   //换行符的风格
insert_final_newline = true  //当你创建一个文件,会自动在文件末尾插入新行
trim_trailing_whitespace = true  //自动移除行尾多余空格

 

.eslintignore 忽略语法检查的目录文件

就是忽略对build/*.js和 config/*.js

package.json :  

 

{"name": "demo","version": "1.0.0","description": "demoApp","author": "","private": true,"scripts": {  /*表示可以执行一些命令,例如:npm run dev会执行node build/dev-server.js,npm run build会执行node build/build.js,因此可以通过scripts配置脚本*/"dev": "node build/dev-server.js","build": "node build/build.js","lint": "eslint --ext .js,.vue src"},"dependencies": {  /*项目的依赖*/"vue": "^2.2.2","vue-router": "^2.2.0"},"devDependencies": {  //编译需要的依赖.......................},"engines": {"node": ">= 4.0.0","npm": ">= 3.0.0"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"]
}

 入口文件: index.html    和 main.js

转载于:https://www.cnblogs.com/yearshar/p/11412971.html

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

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

相关文章

python人工智能_人工智能福利丨Python核心语法实战

Python已正式跻身成熟语言行列&#xff0c;成为整个互联网的基础性语言之一&#xff0c;并以肉眼可见的速度&#xff0c;在全球攻城略地&#xff1a;——牢牢占据TIOBE世界编程语言排行榜第四名&#xff0c;且保持上升趋势——国家级人工智能四大平台确立——正式纳入全国计算机…

.NET Core 单元测试

应用程序测试的类型很多&#xff0c;包括集成测试&#xff0c;Web 测试&#xff0c;负载测试等。在最底层的是单元测试&#xff0c;此测试可以测试单个软件组件或方法。单元测试一般只测试开发人员的代码&#xff0c;不应该测试基础结构普、问题&#xff0c;如数据库&#xff0…

是什么原因导致OutOfMemoryError?

发生以下情况之一时&#xff0c;可能会引发OutOfMemoryError &#xff1a; JVM耗尽了本机内存 Java堆内存不足 PermGen或Metaspace内存不足 JVM花太多时间试图收集垃圾 通常可以从错误消息中OutOfMemoryError出OutOfMemoryError的根本原因。 让我们研究每种情况的细节。 …

win10电脑开机密码忘了怎么办_Mac电脑忘记开机密码怎么办?Mac开机密码快速恢复方法...

Mac忘记开机密码怎么办&#xff1f;虽然小编觉得大多数人应该都不会Mac忘记开机密码&#xff0c;但是如果真的有人忘记了怎么办呢&#xff1f;小编这里教你们一种方法&#xff0c;可以帮你1分钟快速恢复Mac电脑忘记开机密码&#xff0c;感兴趣的朋友快跟着小编一起来看看吧&…

技术管理规划-如何规划团队的架构

管理规划的4个要素 1.职能【清楚自己团队的基本职责和使命】 2.目标【为团队设定清晰的目标】 3.团队【团队的架构规划】 4.路径 团队目标 根据团队目标去梳理团队 团队目标&#xff1a; 某个时间节点&#xff0c;团队发展成什么状态。 要点说明规模实际人数和预算人数分工团队…

win10家庭版调出组策略_利用powershell为win10家庭版安装组策略

虽然win10家庭版阉割了组策略管理器&#xff0c;但至少到1607版本时还可以用cmd脚本安装它。可是随后win10更新了几个大版本&#xff0c;不知为何&#xff0c;cmd控制台常常会有诡异的Bug&#xff0c;导致无法用老办法安装组策略管理器。为了彻底解决这个问题&#xff0c;不妨另…

Spring批处理CSV处理

总览 我们将讨论的主题包括使用Spring Batch进行批处理的基本概念&#xff0c;以及如何将数据从CSV导入数据库。 0 – Spring Batch CSV处理示例应用程序 我们正在构建一个应用程序&#xff0c;该应用程序演示Spring Batch处理CSV文件的基础。 我们的演示应用程序将允许我们处…

NOIP模拟测试28「阴阳·虎·山洞」

写这几个题解我觉得我就像在按照官方题解抄一样 阴阳 题解 将题目中给的阴阳看作黑色和白色 首先我们观察到最后生成图中某种颜色必须是竖着单调递增或竖着单调递减 类似这样 否则不满足这个条件 但合法染色方案必须满足任意两个同颜色格子之间的格子也必须是该颜色。 然后我们…

linux设置环境变量_什么是linux环境变量

本来这篇文章好几天之前就写好了&#xff0c;但是媳妇儿跟我说工作日就不要发了&#xff0c;大家都在上班&#xff0c;哪有闲心思看你的文章。哎&#xff0c;可能大家用头条都是在放松刷娱乐&#xff0c;看小姐姐。所以就一直拖到现在。周末了&#xff0c;更是放松的好时候&…

理科卷math·english·chinese·biology·chemistry·physics

一套比一套炸,果然我只会做B卷,虽然我B也很差但没差到这种地步 $math$ 题解 看似没法做但总会有突破口 $70\%$ 发现和小凯的诱惑很像,于是看$gcd$是否为$1$只要为$1$可以凑齐所有数 $n^2$枚举两两$gcd$ $80\%$ 我考试时思路 找到每一个数和$mod$的$gcd$,发现只要是任一$gcd$倍数…

cad卸载_怎么把CAD卸载干净,老司机来教你

CAD经常出现文件丢失啊、这样那样的提示&#xff0c;要是身边有个大神级朋友还好&#xff0c;没有的小盆友只能乖乖的卸载&#xff0c;重新安装了&#xff0c;那么又有个问题拦住我们了——怎么把CAD卸载干净呢&#xff1f;由于卸载不干净&#xff0c;再次安装CAD时&#xff0c…

什么是JavaServer Faces(JSF)–(第2部分)

Facelets声明语言 在第1部分中&#xff0c;我介绍了JavaServer Pages&#xff08;JSF&#xff09;背后的基本思想 。 在本文中&#xff0c;我想介绍Facelets声明语言 。 HTML标签 我们遇到的第一个标签是代表HTML元素HTML标签。 这些实际上只是HTML标记&#xff08;例如输入&a…

问题 1076: 内部收益率

问题 1076: 内部收益率 时间限制: 1Sec 内存限制: 128MB 提交: 418 解决: 169 题目描述在金融中&#xff0c;我们有时会用内部收益率IRR来评价项目的投资财务效益&#xff0c;它等于使得投资净现值NPV等于0的贴现率。换句话说&#xff0c;给定项目的期数T、初始现金流CF0和项目…

路由器上的usb接口有什么用_路由器的USB接口,非常强大的功能,教您轻轻松松玩转,太实用了...

新一代出来的路由器后面基本上都会有一个或者是两个以上的有USB接口。居然还有很多人都不知道这些&#xff0c;要是比接口的用处。只是把它当做普通的无线路由器用。这样子太可惜了。其实路由器后面的usb接口呀&#xff0c;它有非常强大的功能&#xff0c;好处多多。接下来就请…

关于全局缓存的一种简单实现方法

缓存&#xff0c;在.Net系统开发中&#xff0c;经常使用到。如果&#xff0c;让你自己去实现&#xff0c;你会怎么做呢。 开始编码前思考&#xff1a; 1、肯定 是要 根据 key 去查询对应value&#xff0c;so 应该是List<KeyValuePair> 这类集合做缓存载体&#xff1b; 2、…

Lombok–您绝对应该尝试一下

Lombok在Java生态系统中并不是什么新鲜事物&#xff0c;但是我必须承认&#xff0c;直到我尝试使用它或被“确信”尝试它之前&#xff0c;我总是低估了它的价值。 我发现添加一个库来生成代码的价值并不高&#xff0c;这些库可以被当今的任何现代IDE轻松生成。 因此&#xff0c…

苹果手机透明桌面_原来苹果手机辨别真假这么简单!查看桌面1个图标,就能轻松分辨...

要说哪个品牌的手机贵&#xff0c;大家想到的肯定是苹果手机啦&#xff0c;所以说很多朋友都害怕自己买到假货。其实分辨苹果手机是不是正品很简单&#xff0c;只需学会这两个方法&#xff0c;就能辨别出手机的真假哦。一、从细节入手1.桌面时钟不知道大家发现没&#xff0c;iP…

NOIP模拟测试34「次芝麻·呵呵呵·长寿花」

次芝麻 题解 大力打表,发现快速幂, 例如初始$5$ $6$,那么第一次就是$5*2\%1110$,$6*2\%111$. 代码 #include<bits/stdc.h> using namespace std; #define ll long long ll n,m,k,d; ll g(ll x,ll k,ll s1){for(;k;k>>1,xx*x%d)if(k&1) ss*x%d;return s; } int …

Java Bean验证基础

这篇文章总结了一些简单易用的示例&#xff0c;这些示例说明了您想使用Java Beans Validation API&#xff08;JSR 349&#xff0c;JSR 303&#xff09;进行的最常见操作。 记住&#xff0c;Beans Validation独立于Java EE。 尽管它是作为Java EE兼容服务器的一部分内置的&…

NOIP模拟测试「简单的区间·简单的玄学·简单的填数·简单的序列」

简单的区间 $update$ 终于$AC$了 找到$(sum[r]sum[l](sum表示以中间点为基准的sum)-mx)\%k0$的点 注意这里$sum$表示是以$mid$为基准点,(即$sum[l]$为后缀和,$sum[r]$为前缀和) 回忆$(sum[r]-sum[l])\%k0$这个经典问题做法(入阵曲简化版),开桶,桶里维护$sum[l]\%k$,那么$r$贡献…