首页 前端知识 Vue的安装及使用教程【超详细图文教程】

Vue的安装及使用教程【超详细图文教程】

2024-01-25 10:01:41 前端知识 前端哥 2 164 我要收藏

一、安装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地址,打开浏览器粘贴到浏览器地址栏中按下回车键

 

结束

转载请注明出处或者链接地址:https://www.qianduange.cn//article/263.html
标签
vue.js
评论
发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!