Vue入门篇:(一)环境搭建、项目创建、项目运行、项目打包

小郝不负流年
小郝不负流年   + 关注
2020-10-13 20:22:47   阅读10200   评论0

目录:

1、安装node.js环境

2、安装cnpm

3、安装vue-cli脚手架构建工具

4、用vue-cli构建项目

5、安装项目所需的依赖

6、项目运行

7、项目打包


1、安装node.js环境

下载地址:https://nodejs.org/zh-cn/

安装过程没有太多好说的,安装完成后 win+R打开命令行输入node -v , 如图,出现版本号说明安装成功。

npm包管理器是集成在node中的 , npm -v可以查看版本


2、安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候很慢或者失败,所有还需要npm的国内淘宝镜像---cnpm。

命令行输入npm install -g cnpm --registry=http://registry.npm.taobao.org  安装,可以使用cnpm -v查看。

之后就可以使用cnpm代替npm来管理依赖。 

淘宝镜像说明:https://developer.aliyun.com/mirror/NPM?from=tnpm


3、安装vue-cli脚手架构建工具

命令行输入 cnpm install -g vue-cli ,然后等待安装,安装完毕后在命令行输入vue --version,会显示安装的版本号,安装成功。 


4、用vue-cli构建项目

首先确定项目文件放置的目录,比如我选择 C:/demo文件夹下.

然后命令行进入此目录,使用webpack 构建一个初始项目,运行命令 vue init webpack vue-demo

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。 


5、安装项目所需的依赖

要安装依赖包,首先cd到项目文件夹(vue-demo文件夹),然后运行命令 cnpm install ,等待安装(安装可能很慢)。 完成后项目目录下会多出一个node_modules 文件夹,依赖资源就在里面。


6、项目运行

在项目目录中,运行命令 npm run dev 

运行成功后,浏览器访问:

7、项目打包

在项目目录中,运行命令npm run build 

打包后的文件,用于部署Web服务器


参考资料:

https://blog.csdn.net/Freya_yyy/article/details/81675498

https://developer.aliyun.com/mirror/NPM?from=tnpm


对我有用,我要     转载  
文章分类: Vue  
所属标签: vue   vue入门  
  • 0条评论
  • 只看作者
  • 按时间|按热度
  • 由于本人多次涉及需要打印这个证明,而每次都会忘记入口,在网上各种搜索各种摸索很是浪费时间。故本次将操作流程整理记录下来,以备忘。同时也分享给大家。1、打开湖北政务服务网,地址:http://zwfw.hubei.gov.cn/s/index.html2、切换区域到“武汉市”3、在“特色服务”模块找到“(个人)武汉市社会保险公共服务平台”4、进入“(个人)武汉市社会保险公共服务平台”,登录账号密码<imgsrc="https://cdnstatic.hoscen.cn/blog/article/184053017752895488/img/497065960be44747825acb86a17483c1.png"style=
  • 如何使用postman模拟http发送xml参数报文的POST请求?1、postman工具通过安装软件或使用谷歌插件都可以,这里不再赘述。2、配置postman,选择POST,填写URL;切换到Headers,添加Content-Type:text/xml 3、切换到body,选择raw,XML,下方填写你的请求报文4、点击Send发送请求,如图可以看到响应状态、时间、结果等信息5、讲到这里就结束了,是不是学会了?快去试试吧!
  • java中的注解@Generated用来标注源代码中的某些东西是由某些工具生成的,而不是人写的。这个注解可以用于:包、类、注解类、方法、构造方法、变量、本地变量、方法参数。
  • 解决办法:是idea的加载有问题,关闭IDEA,在工程的根目录下删除.idea文件,重新打开IDEA加载就好了。
  • Failedtoloadprojectconfiguration:cannotparsefileF:/xx/.idea/modules.xml:ParseErrorat[row,col]:[1,1]Message:文件提前结束。解决办法:关闭idea,删掉这个文件,重新打开idea
  • 目录:1、安装node.js环境2、安装cnpm3、安装vue-cli脚手架构建工具4、用vue-cli构建项目5、安装项目所需的依赖6、项目运行7、项目打包1、安装node.js环境下载地址:https://nodejs.org/zh-cn/安装过程没有太多好说的,安装完成后 win+R打开命令行输入node -v , 如图,出现版本号说明安装成功。npm包管理器是集成在node中的 , npm -v可以查看版本2、安装cnpm由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时
  • 建立服务器内网其他IP端口的隧道,可以将远程的服务映射到本地进行访问。finalshell配置隧道方法:
  • 上传图片微服务网关报错:UT000054:Themaximumsize1048576foranindividualfileinamultipartrequestwasexceeded原因:所用容器对文件的限制一般项目用的是spring 对spring参数进行配置即可spring:servlet:multipart:#MultipartPropertiesmax-request-size:10MB#总文件大小max-file-size:10MB#单个文件大小注意如果是nginx代理配置限制,报错信息里面会标记nginx。届时需要设置nginx在server_name下加上client_max_body_size20m;
  • 很多时候我们需要Linux服务器定时去运行一个脚本来触发一个操作,比如写缓存数据到硬盘、定时备份、定时重启服务、定期清除日志等。下面就简单讲解一下Linuxcrontab命令如何实现自动循环执行shell脚本。一、准备shell脚本比如我们准备一个hello.shvim/hcn/sh/hello.sh#!/bin/bash  DATETIME=$(date"+%Y%m%d%H%M%S") echo"hello, www.hoscen.cn,时间:${DATETIME}"  通过chmod命令赋予该脚本的执行权限chmod755hello.sh测试正确性二、开启crontab服务 linux应该都有crontab,没有的话可以安装一下:yuminstall vixie-cronyuminstall crontabsvixie-cron软
  • Idea启动报PluginError错误解决方法:找到IDEA的配置文件夹下的disabled_plugins.txt,删除然后重启IDEA即可。错误描述    PluginError    Problemsfoundloadingplugins:    Plugin"GlassFishIntegration"wasnotloaded:requiredplugin"JavaEE:EJB,JPA,Servlets"isdisabled.    Plugin"JBossjBPM"wasnotloaded:requiredplugin"JavaEE:EJB,JPA,Servlets"isdisabled.    Plugin"JBossIntegration"wasnotloaded:requiredplugin"JavaEE:EJB,JPA,Servlets"isdisabled.    Plugin"JSR45Integration"wasnotloaded:requiredplugin"JavaEE:EJB,JPA,Servlets"isdisabled.    Plugin"JettyIntegration"wasnotloaded:requiredplugin"JavaEE:EJB,JPA,Servlets"isdisabled.    Plugin"ResinIntegration"wasnotloaded:requiredplugin"JavaEE:EJB,JPA,Servlets"isdisabled.    Plugin"TomcatandTomEEIntegration"wasnotloaded:requiredplugin"JavaEE:EJB,JPA,Servlets"isdisabled.    Plugin"CloudBeesintegration