Vue安装教程 (一)
目录
- 1. 安装清单
- 2. Node安装
- 2.1 Windows 中安装
- 2.2 Mac中安装
- 2.3 NVM
- 3. Webpack安装
- 4. Vue安装
- 5. Vue-cli安装
- 6. 创建项目
- 7. 目录结构
1. 安装清单
- node
- webpack
- vue
- vue-cli
2. Node安装
node一定要8.11以上版本,如果以前安装过node并且8.11以上那么跳过这个步骤。
node下载地址
2.1 Windows 中安装
找到LTS,Windows Installer 中 .msi后缀这一行,根据自己系统选择32位或者64位,点击下载。
下载后得到一个node-v版本号x位数.msi文件,双击打开:
最后疯狂点击Next下一步,Next下一步,Next下一步,Next下一步,Install安装,直到提示安装成功。
安装成功后在CMD测试下是否成功,打开CMD输入
node -v
npm -v
出现版本号就OK了~
2.2 Mac中安装
- 官网下载.pkg包安装
- 通过brew安装
brew install node
2.3 NVM
也建议使用nvm,很爽,可以自由切换node版本。
3. Webpack安装
建议webpack安装在项目里,不要全局安装,在项目内安装这一步骤可以直接跳过。
- 安装最新版本
npm install webpack
- 安装指定版本,如需要3.3.3版本
npm install webpack@3.3.3
- 全局安装
npm install --global webpack
官网原话,不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。
如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm install --save-dev webpack-cli
4. Vue安装
- 安装最新版本
npm install vue
- 安装指定版本,如需要3.3.3版本
npm install vue@3.3.3
- 全局安装
npm install --global vue
5. Vue-cli安装
Vue-cli是官方提供的一个SPA单页面应用的脚手架,基本上项目开发都用它,如果项目重SEO可以考虑Nuxt这个脚手架。
官方介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service),该依赖:
可升级;
基于 webpack 构建,并带有合理的默认配置;
可以通过项目内的配置文件进行配置;
可以通过插件进行扩展。
一个丰富的官方插件集合,集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
安装
npm install -g @vue/cli
安装后查看版本来验证是否安装成功
vue --version
同样出现版本号就OK啦~
6. 创建项目
Vue创建项目 (二)
7. 目录结构
Vue目录结构 (三)
Vue安装教程 (一)相关推荐
- npm vue安装教程
npm安装教程 已经填坑,分享给新手. npm安装教程 https://blog.csdn.net/qq451354/article/details/65021307?locationNum=14&a ...
- vue安装教程(遇到的坑详解)
1.安装node.js(菜鸟教程:http://www.runoob.com/nodejs/nodejs-install-setup.html node官网:https://nodejs.org/e ...
- 2.vue 安装教程
安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装). 安装完成之后,打开命令行工具,输入 node -v,如下图,如果 ...
- vue安装教程(自己安装过程及遇到的一些坑)
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- vue安装教程及简介
Vue.js 是一套构建用户界面的渐进式框架.只关注视图层, 采用自底向上增量开发的设计. 目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue 学习起来非常简单. 目录 常用的 ...
- npm,vue简易安装教程
npm,vue安装教程 1.下载node.js 直接去官网下载就好:Node.js 官网 点进去有两个选项,一个是LTS版本,一个是Current版本,下载LTS版本就好. LTS是长期支持(Long ...
- vue基础教程总结篇,用最短的时间入门vue.js(持续更新...)
目前,vue已经成为前端工程师必会的框架之一,这里简单总结一下,可以让您快速的入门vue,师傅带进门,修行靠个人,最主要的还是自己多动手,多实践,本专栏会持续更新. 1.vue安装教程及简介 2.vu ...
- 1. Windows 10 - Node与Vue - 安装 Vue 2.x 及 3.x 框架 - 项目创建要点
目录 前言 一.vue 简介: 1.npm简介 2.cnpm 简介 二.设置node的全局和缓存路径 手动创建node.js的全局和缓存路径目录 Windows命令行配置node.js的全局和缓存路径 ...
- Macbook 苹果电脑 安装搭建Vue脚手架教程m1芯片Vue脚手架初学
Macbook 苹果电脑 安装Vue脚手架教程 1.首先我们进入Node.js的官网,下载安装Node.js 如果你已经安装过可以忽略 网址http://nodejs.cn/ 2.直接点击下载,这里我 ...
- vue-devtools安装教程 附各种常见错误处理(图标不显示 图标显示控制台没用Vue选项卡)
安装教程 1.选择master分支的vue-devtools克隆 2.修改mainifest.json 中的persistant为true 3.安装依赖 使用命令npm install自动下载依赖模块 ...
最新文章
- JavaScript 调试建议和技巧
- linux umount swap,挂载、卸载、free查看内存情况、创建交换分区、回环设备、dd命令、自动挂载、fuser...
- TypeScript 2.1发布
- opencv检测相交点_OpenCV特征点检测------ORB特征
- java 内部类 菜鸟编程,java中的匿名内部类
- 大三软件工程小项目-小技术集合-读取XML文件及运行外部程序
- 对桌面壁纸有要求?壁纸控的你需要看这里
- 计算机硬件基础-笔记
- 【口语语言理解】新分类!全总结!最新Awesome-SLU-Survey资源库开源!
- 【UNITY3D 游戏开发之八】UNITY编译到IPHONE运行 COLLIDER 无法正常触发事件解决方案...
- c语言公路竖曲线要素代码,竖曲线要素
- linux 命令chmod 755的意思
- 【分享】如何自动同步企业微信外部客户信息到CRM系统?
- OnlyBill 简易记账软件(续)
- 如何支持RTSP播放H.265(HEVC)流
- 2014江苏职称计算机考试题型,2014年江苏省职称计算机考试Powerpoint单选真题
- ubuntu 搜狗输入法突然只能输入拼音
- 达内python培训体系
- android带圆点的轮播图,Android 实现轮播图效果 底部圆点布局实现
- 在职爬虫工程师,带给大家超简单 Python 爬虫教程