系列文章:
文章目录
node.js安装vue环境安装vue创建项目命令行方式创建使用UI界面搭建idea导入vue项目学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ,使用Vue的脚手架的话,只需要学习Node的npm指令
node.js安装
node.js官网下载最新的长期版本,直接运行安装完成之后,我们就已经具备了node和npm的环境啦。
可以修改安装路径,之后一路默认即可。
如果出现红色的框的warn则按照如下步骤解决:
1、打开nodejs安装位置的文件夹。并打开两个文件 npm.cmd 和 npm
可能需要修改权限,右键-属性…如图,修改npm,npm.cmd的信息
2、找到那2个文件里面的prefix -g替换为prefix --location=global
3、最后打开cmd,查询npm版本即可!!!
说明:npm包管理器是集成在Node.js中,所以安装Node.js时候就已经自带npm,这里不需要安装,输入 npm -v即可得到npm版本
vue环境安装
将npm远程仓库替换为淘宝的仓库(替换成淘宝源)
# 安装淘宝npmnpm install -g cnpm --registry=https://registry.
安装构件项目骨架的工具vue-cli
# vue-cli 安装依赖包,以下两个命令选择其中一个即可,npm 会慢一点cnpm install --g vue-clinpm install -g @vue/cli
npm与cnpm的区别:
npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)
cpnm:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以乐于分享的淘宝团队使用了国内镜像来代替国外服务器
vue的卸载(不需要执行的,如果安装错了可以卸载)npm uninstall -g @vue/clinpm cache clean --force
总结安装:
分别通过
node --version
vue --version
npm --version
查看当前版本号
可以通过
npm install -g npm 或者cnpm install -g npm更新最新版本npm
npm install @vue/cli -g或者cnpm install @vue/cli -g更新最新版本vue/cli
通过官网下载最新版本的node.js
安装过程我遇到的问题:
@vue/cli创建项目遇到ERROR Failed to get response from /vue-cli-version-marker 解决方法
vue创建项目
命令行方式创建
创建项目
vue create 项目文件名称
初始化中的选择
? Please pick a preset:
请选择脚手架如何搭建,三个选项
使用vue2,babel及eslint使用vue3,vue3的babel,eslint手动选择(选择该项)
? Please pick a preset: ❯ Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
开始选择,按空格是选中和取消,选择Babel
,Router
,Vuex
。其他的使用时后续可以再引入即可。
Choose a version of Vue.js that you want to start the project with
选择vue版本,根据项目情况,我选择的3.x
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
有一些配置(babel,eslint,etc.)是放到package.json中,还是独立出一个配置文件,
选择独立出一个配置文件
? Save this as a preset for future projects? (y/N)
是否将以上的配置留存下来,等待下次使用vuecli3创建vue项目时,可以直接选择该套配置,省去以上的配置流程。根据个人情况
打开项目:
启动:
使用UI界面搭建
在想要创建项目的目标文件夹启动vue ui
下一步中,项目文件夹中输入项目名称“vueblog-vue”,其他不用改,点击下一步,选择【手动】,再点击下一步,如图点击按钮,勾选上路由Router、状态管理Vuex,去掉js的校验。
下一步中,也选上【Use history mode for router】,点击创建项目,然后弹窗中选择按钮【创建项目,不保存预设】,就进入项目创建啦。
稍等片刻之后,项目就初始化完成了。上面的步骤中,我们创建了一个vue项目,并且安装了Router、Vuex。这样我们后面就可以直接使用。
Cannot set properties of null (setting ‘context’)
解决方案:我是参考@vue/cli创建项目遇到ERROR Failed to get response from /vue-cli-version-marker 解决方法之后使用命令行创建的,之后又使用ui方式创建,ui方式创建成功,应该是这个问题。(我电脑也有hadoop环境)
idea导入vue项目
需要引入vue.js插件,之后重启idea
导入:File -> New - > Project from existing Source…
之后一路next
引入element ui
cnpm install element-ui --save
src下main.js引入ElementUI
启动项目
npm run serve
或者以下面方式启动
Add Configuration-> + -> npm ->
Script是脚本填入serve
接下来,我们来安装axios(www.axios-/),axios是一个基于 promise 的 HTTP 库,这样我们进行前后端对接的时候,使用这个工具可以提高我们的开发效率。
安装命令:
cnpm install axios --save
然后同样我们在main.js中全局引入axios。
import axios from 'axios'Vue.prototype.$axios = axios
组件中,我们就可以通过this.$axios.get()来发起我们的请求了哈。
如果觉得《vue脚手架安装以及vue脚手架创建项目(详细步骤)》对你有帮助,请点赞、收藏,并留下你的观点哦!