vue安装及创建项目的几种方式
原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式
VUE安装的方式
直接用 script标签 引入
对于制作原型或学习,你可以这样使用最新版本:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
使用后面的方式安装需要提前安装好node和npm工具
NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装
# 最新稳定版
sudo npm install vue
命令行工具 (CLI)
vue CLI是官方提供的单页面应用 (SPA) 脚手架工具,超级简单快捷。安装vue只需要一条命令即可。
sudo npm install -g @vue/cli
安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确:
vue --version
VUE创建项目的方式
vue create命令进行创建项目
运行命令
vue create 项目名称
设置镜像
会提示是否使用淘宝镜像安装,这里输入y然后回车
Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation?
选择默认设置
然后会提示选择设置,这里默认即可。回车
Vue CLI v4.4.6
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
选择包管理工具
然后提示选择安装的包工具使用什么,这里选择npm,然后回车
Pick the package manager to use when installing dependencies:
Use Yarn
❯ Use NPM
然后就会自动创建完整的项目啦!
运行项目
然后进入项目目录,运行命令即可查看。
cd vue222
npm run serve
第二种方式
除了上边命令的方式,官方还提供了可视化创建工具。
运行命令
vue ui
然后在浏览器打开网站,如果端口被占用了可能会是其他的,不影响使用。
ctrl + c可以终端服务
进入浏览器操作
打开之后,看到如下界面。
然后点击创建,选择最下边在此创建项目,上边可以选择路径。
然后输入项目名称,选择包管理工具为npm ,点击下一步
然后选择配置,直接默认即可。
等待完成即可。如果遇到问题可以私信,我会及时进行解答。
vue安装及创建项目的几种方式的更多相关文章
- git创建项目的两种方式
场景1: 将本地内容推送给远程库 1.创建版本库 git init 将此目录转换为git可管理的仓库 git config --global user.name "xx" 或 gi ...
- C++框架_之Qt的开始部分_概述_安装_创建项目_快捷键等一系列注意细节
C++框架_之Qt的开始部分_概述_安装_创建项目_快捷键等一系列注意细节 1.Qt概述 1.1 什么是Qt Qt是一个跨平台的C++图形用户界面应用程序框架.它为应用程序开发者提供建立艺术级图形界面 ...
- Webpack指南(一):安装,创建项目,配置文件,开发环境以及问题汇总
Webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gra ...
- vue-cli 3.0 安装和创建项目流程
使用前我们先了解下3.0较2.0有哪些区别 一.3.0 新加入了 TypeScript 以及 PWA 的支持二.部分命令发生了变化: 1.下载安装 npm install -g vue@cli 2. ...
- Django在Win7下安装与创建项目hello word示例
Django在Win7下的安装及创建项目hello word的例子 有关python 的django 框架安装与开发的小例子.Django在Win7下的安装及创建项目hello word.1.安装:命 ...
- mac下配置Node.js开发环境、express安装、创建项目
mac下配置Node.js开发环境.express安装.创建项目 一.node.js的安装 去官网下载对应的平台版本就可以了,https://nodejs.org 二.express安装 sudo n ...
- 简述--构建React项目的几种方式
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- tomcat发布web项目的三种方式
tomcat发布web项目的三种方式 方式一: 配置tomcat 安装目录下的conf/server.xml <Host name="loaclhost">标签里面添加 ...
- Eclipse导入SVN项目的三种方式
Eclipse导入SVN项目的三种方式 一.直接Import导入: 1.点击 File --> Import,进入导入项目窗口 2.选择从SVN检出项目,点击Next 3.选择创建新的资源库位置 ...
随机推荐
- Java实现 LeetCode 77 组合
77. 组合 给定两个整数 n 和 k,返回 1 - n 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], ...
- Java实现 蓝桥杯 算法提高 成绩排序
试题 算法提高 成绩排序 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 给出n个学生的成绩,将这些学生按成绩排序, 排序规则,优先考虑数学成绩,高的在前:数学相同,英语高的在前:数 ...
- Android中如何使用GridView
首先在主XML中放入Grid View控件 取好id private GridView gv1; private int[] icon = {R.drawable.cat, R.drawable.co ...
- java实现第六届蓝桥杯移动距离
移动距离 题目描述 X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3- 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: 1 2 3 ...
- 温故知新-Mysql锁&事务&MVCC
文章目录 锁概述 锁分类 MyISAM 表锁 InnoDB 行锁 事务及其ACID属性 InnoDB 的行锁模式 注意 MVCC InnoDB 中的 MVCC 参考 你的鼓励也是我创作的动力 Post ...
- test for OCr
- Nlog打印日志到Influxdb数据库
1.安装和使用Influxdb 安装部分网上资料比较多,也讲的比较详细,请自行百度. 下面大概讲下InfluxDB的写入和读取数据的方法. 我使用了InfluxData.Net包. 工具->Nu ...
- watch监听事件
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化.以下实例通过使用 watch 实现计数器: <div id="app"> ...
- BrainF**k的编译器
按照语法编写了这个"编译器"(对于解释性语言而言"编译"二字的确很奇怪). 功能: 1."编译".运行一个后缀为 '.bf' ...
- ArchLinux的安装
ArichLinux安装教程 Arch Linux 于 2002 年发布,由 Aaron Grifin 领头,是当下最热门的 Linux 发行版之一.从设计上说,Arch Linux 试图给用户提供简 ...