位置: IT常识 - 正文
Vue的安装及使用教程【超详细图文教程】(vue的安装步骤)
编辑：rootadmin推荐整理分享Vue的安装及使用教程【超详细图文教程】(vue的安装步骤)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:安装 vue,vue怎么装,安装 vue,vue3.0怎么安装,vue的安装步骤,vue2.0安装,vue3.0怎么安装,vue3.0怎么安装,内容如对您有帮助，希望把文章链接给更多的朋友！
一、安装Node.js
安装步骤详细见Node.js下载安装及环境配置 =》https://blog.csdn.net/WHF__/article/details/129362462
二、安装vue
①安装 vue.js： npm install vue -g // -g为全局安装
注意：要以管理员身份运行cmd命令窗口！！
点击【开始】菜单，在搜索框输入“命令提示符”，点击“以管理员身份运行”
②安装webpack模板：npm install webpack -g
安装webpack-cli：npm install --g webpack-cli
安装成功后使用【 webpack -v 】查看版本号
ps：如果出现以下情况，无法查看版本号，可以安装指定版本即可解决
③安装@vue/cli： npm install -g @vue/cli
输入： vue --version 查看版本号
④安装vue-cli： npm install -g @vue/cli-init
⑤安装vue-router： npm install vue-router -g
三、创建Vue项目
1.创建Vue项目 - vue init
vue init命令是vue-cli2.x提供创建Vue项目的方式，可以使用github上面的一些模板来初始化项目。比如webpack就是官方推荐的标准模板。
①创建方式： vue init webpack xxx项目名称
vue create demo00②具体环节的选择，回车确认
④创建完成， cd进入项目， npm run dev启动项目
⑤打开浏览器浏览器输入地址
2.创建Vue项目 - vue create
vue creat命令是vue-cli3.x提供创建Vue项目的方式，模板是固定的，模板选项可自由配置。
①创建方式： vue create xxx项目名称
vue create demo01②用键盘上下箭头移动到【Manually select features】，按回车键选择
③根据自己的需求选择，按空格键选择，回车键继续
Babelvue项目中普遍使用 es6 语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将 es6 转成 es5。TypeScriptTypeScript 通过添加类型来扩展 JavaScript。通过了解 JavaScript，TypeScript 可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行 JavaScript 的地方。 完全开源。Progressive Web App (PWA) Support渐进式Web应用程序（PWA）支持。RouterVue Router 路由。VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。CSS Pre-processorsCSS预处理器，预处理器：比如要用 sass 或者 cssNext 就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成 css。Linter / Formatter格式化程序。Unit Testing单元测试。E2E Testing端到端（end-to-end）。④选择vue版本号，这里我选择2.x，回车键继续。
⑤这里我选择否，输入： n，回车继续。
⑥ 选择 eslint 校验规则。此处建议选择默认配置，即直接回车即可。
⑦选择什么时候进行代码校验，此处建议选择第一个，回车即可。
⑧选择存放配置，此处建议选择第二个，存放到package.json中，回车即可。
⑨选择是否保存本次配置。建议选择 N，即不保存。回车确认。
⑩创建项目成功，cd 项目名称 进入项目，npm run serve 运行项目
复制Local地址，打开浏览器粘贴到浏览器地址栏中按下回车键
结束
上一篇：JavaWeb项目(登录注册页面)全过程详细总结(javaweb项目登录页面不跳转)
下一篇：pytorch 笔记：torch.distributions 概率分布相关（更新中）(pytorch torch)
