前端学习-VUE框架

第一天环境安装
安装nmp
进入网站 https://nodejs.org/en/download/ 会出现如下图所示的页面

一直下一步，默认安装C盘（我没动）
安装完成win+r 输出cmd
node-v 和 npm-v 确认node和npm的版本号

!](https://img-blog.csdnimg.cn/77e13e671bea483b9b32079aded6c356.png)

安装vue环境后，打开vue官方
https://cli.vuejs.org/zh/guide/installation.html

建项目操作
桌面建个文件夹在文件夹中打开cmd，运行npm install -g @vue/cli安装就行

安装完成后检测，vue环境安装成功

运行vue-ui，图形化后台创建自己的vue项目

总结之前看了很多网上项目，很多人遇到坑，说是要配置环境变量之类的，我没有遇到，我遇到的BUG，是之前的vue项目，由于里面的依赖版本问题，npm install -g @vue/cli安装一直报错，升级话会很坑爹。我就新开了一个vue项目，还有就是如果vue ui打不开网站报什么window 找不到http://localhost:8000文件的BUG，点击任意浏览器，设置始终默认一个浏览器

2.命令行创建项目
首先确保vue环境安装好

vue create vue_project_01 (项目名称)，

我选择的默认，大约需要几分钟

安装成功
并且运行npm run serve 把项目运行起来

命令创建项目到此完成

第二种图形化创建
选择一个文件夹

安装依赖，运行依赖
“dependencies”: {
“axios”: “^0.24.0”,
“core-js”: “^3.6.5”,
“element-ui”: “^2.4.5”,
“qs”: “^6.10.2”,
“vue”: “^2.6.11”,
“vue-router”: “^3.2.0”,
“vuex”: “^3.4.0”
},
开发依赖
“devDependencies”: {
“@vue/cli-plugin-babel”: “~4.5.0”,
“@vue/cli-plugin-eslint”: “~4.5.0”,
“@vue/cli-plugin-router”: “~4.5.0”,
“@vue/cli-plugin-vuex”: “~4.5.0”,
“@vue/cli-service”: “~4.5.0”,
“@vue/eslint-config-standard”: “^5.1.2”,
“babel-eslint”: “^10.1.0”,
“eslint”: “^6.7.2”,
“eslint-plugin-import”: “^2.20.2”,
“eslint-plugin-node”: “^11.1.0”,
“eslint-plugin-promise”: “^4.2.1”,
“eslint-plugin-standard”: “^4.0.0”,
“eslint-plugin-vue”: “^6.2.2”,
“less”: “^3.9.0”,
“less-loader”: “^5.0.0”,
“vue-cli-plugin-element”: “^1.0.1”,
“vue-template-compiler”: “^2.6.11”
}
vue 3.0安装element

vue 2.0安装element

安装完less 百度降低less版本，最新的会报错

前端学习-VUE框架相关推荐

vue中集合取第一个_快速学习Vue框架（知识点集合）
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦.建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册. 基础知识: ·vue的生命周期:beforeCreate/ ...
前端基础学习——Vue框架-AJAX的使用
目录一. AJAX基础 1.1.AJAX简介 1.2.第三方数据接口 1.3.AJAX实例 1.4.AJAX的异步特性二. axios框架 2.1.get方式与post方式请求 2.2.axios ...
前端笔记-Vue框架的基本认识
目录基本概念 div与vue实例绑定挂载点,模板,实例之间的关系插入页面的其他写法模板指令 Vue中的属性绑定和双向数据绑定 Vue中的计算属性和侦听器 v-if,v-show,v-for指令 ...
为什么学习Vue框架？？
1 - 为什么要学习Vue? 说起Vue,不得不让我们想起Angular和React,他们都是业界非常优秀的前端框架. 可以说,这三款框架基本处于三分天下的一个局面,仅从GitHub趋势来看,Vue更 ...
前端学习——vue基础知识
1. Vue初体验: 1.1 导入开发版本的Vue.js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ...
前端学习——VUE初见
文章目录示例:helloworld 示例解析 1. html文件 1.1 基本结构 1.2 meta标签 1.3 script标签 1.4 var app = new Vue 名词解释 1. 渐进式 ...
python前端学习-------Flask框架基础（建议收藏）
Flask框架基础下载并安装Flask框架 Flask基础第一个Flask应用开启调试模式路由变量规则构造URL HTTP方法模板语法格式模板变量控制结构条件控制语句 `if` ...
前端学习 -- HtmlCss -- 框架集
框架集和内联框架的作用类似,都是用于在一个页面中引入其他的外部的页面,框架集可以同时引入多个页面,而内联框架只能引入一个,在h5标准中,推荐使用框架集,而不使用内联框架. 使用frameset来创建一 ...
【前端学习 Vue (8) 什么是SSR】
1. 什么是SSR SSR也就是服务端渲染,也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成,然后再把html直接返回给客户端. 服务端渲染 SSR 的优缺点如下: (1)服务端渲染的优 ...

前端学习-VUE框架

前端学习-VUE框架相关推荐

最新文章

热门文章