首页 > 其他分享 >vue安装与初始化

vue安装与初始化

时间:2023-05-23 14:44:34浏览次数:51  
标签:npm 初始化 vue init webpack 安装 模板

vue npm 使用 验证 安装

安装vue

	npm install --global vue-cli

vue版本

	vue -V

其他版本

	node -v
	npm -v

查询当前镜像地址

	npm get registry 

修改镜像地址

	npm config set registry http://registry.npm.taobao.org/

taobao镜像设置并使用cnpm呼唤

	npm install -g cnpm –registry=https://registry.npm.taobao.org

检验是否安装成功

	cnpm -v

vue模板初始化

Vue CLI的安装

教程

全局安装

	npm install vue-cli -g

1. vue create

是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。

使用方式:vue create 项目名称

2. vue init

vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的src目录覆盖3.x的src目录(如果修改了配置,可以查看文档,用cli3的方法进行配置)

2.1 官方推荐的标准模板名

使用方式:vue init webpack 项目名称
[webpack结构与路径讲解]

	vue init webpack \[projectName\]

当前官方提供的模版包括:

- webpack
	功能齐全的webpack + vue-loader 的设置、热重载、eslint、test 和 css 提取。
- webpack-simple
	一个快速设置简单的 webpack + vue-loader原型的模版。

- browserify
	功能齐全的 browserify + 'vueify'设置与热重负荷,linting和单元测试。

- browserify-simple
	快速设置简单的 browserify + 'vueify' 原型。

- pwa
	基于webpack的vue-cli 的单页面模版。

- simple
	对 html 的简单 vue 配置 。

2.2 electron-vue的模板

使用方式:vue init simulatedgreg/electron-vue 项目名称

2.3 自定义模板
使用方法:
1.再git仓库创建自己项目要的项目结构
2.执行初始化

	vue init gitusername/reponame my-project

3.安装

	cd my-project
	$ npm install
	$ npm run dev

标签:npm,初始化,vue,init,webpack,安装,模板
From: https://www.cnblogs.com/chrisleon/p/17425137.html

相关文章

  • Linux下安装MySQL
    安装环境:虚拟机virtualbox,Ubuntu20.04系统;命令行下输入:sudoaptupdatesudoapt-getinstallmysql-server等待安装完成后,输入命令进行配置;sudomysql_secure_installation是否对密码验证组件进行配置?y密码强度?0root新密码?your_password 是否继续?y 遇到这个问......
  • Mysql简易安装介绍
    1.建议压缩包安装解压到对应文件,配置环境变量到path:D:\mysql-5.7.19-winx64\bin2.新建mysql配置文件my.ini在mysql根安装目录下新建mysql配置文件my.ini,文件内容如下:[mysqld]basedir=D:\mysql-5.7.19-winx64\datadir=D:\mysql-5.7.19-winx64\data\port=3306skip-gran......
  • vue项目加载会出现花括号{{}}的解决方法
    使用v-cloak指令这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。<divv-cloak>{{message}}</div>[v-cloak]{display:none;}......
  • Vue2 到 Vue3 升级插件gogocode-plugin-vue
    配合gogocode-cli使用开始迁移​Vue3的到来为我们带来了许多惊喜的变化,但是由于Vue3对于Vue2在Api层面存在诸多兼容问题,并不能做到平滑升级。所以我们根据v3迁移指南利用gogocode这个代码转换利器,利用它操作AST,开发了一套Vue2升级工具。利用这套工具能够快速地把你的Vue2代码升......
  • Git的下载安装配置
     git教程 1.版本管理工具概念我在大学毕业写论文的时候的时候碰到过如下的现象```<<毕业论文第一版.doc>><<毕业论文第二版.doc>><<毕业论文第三版.doc>><<毕业论文最终版.doc>><<毕业论文最终版2.doc>>```在这种情况下如果不能查看修改之前的代码,查找问题是非常困难的......
  • Vue计算器实例练习
    计算器实例常用的加减乘除,点击=显示计算结果X2、1/x:输入任意的数字,点击X2、1/x计算出结果点击C清空当前内容点击✖删除末尾的字符点击结果栏,可以直接输入运算表达式源码X2使用v-html在网页中显示点击特定的位置,执行特定的功能str.substring(参数1,参数2)参数1......
  • Mac Git安装
    如何安装Git到MACOSX一,使用Gitcommand-line这里先介绍下使用Command-line。1,下载Gitinstaller,地址;http://git-scm.com/downloads2,下载之后打开,双击.pkg安装3,打开终端,使用git--version命令查看安装版本,有就是安装成功了......
  • linux 一块空磁盘初始化为dos的磁盘分区表,然后可以直接初始化整个磁盘为ext4格式,也可
    问:linux一块空磁盘初始化为dos的磁盘分区表,然后可以直接初始化整个磁盘为ext4格式,也可以先把磁盘分出一个Partition再初始化为ext4格式,这两种方式有什么区别,有什么特点答:在Linux上,对一块空磁盘进行初始化为ext4文件系统时,你可以选择两种不同的方式:直接初始化整个磁盘为......
  • vueh5实现双指操作图片或者内容放大缩小拖动 (hammerjs插件)
    可在mounted钩子直接使用通过使用Hammer.js库来实现手势操作,包括缩放、拖动和双击重置功能1.在模板中添加了一个<div>元素,并为其设置了ref属性,以便在代码中引用该元素。2.在mounted生命周期钩子函数中,通过this.$refs.main获取之前设置的<div>元素。3.创建了一个新的Hammer实例,传入......
  • nginx安装配置博客总结列表
    1)进入编辑配置文件:sudovim/etc/nginx/nginx.conf2)配置文件添加内容:3)重启nginxsudoservicenginxrestart//或者sudonginx-sreloadnginx相同域名转发不同路径:nginx域名监听转发:nginx转发同一域名的不同项目-多tomcat:......