使用Vue cli创建Vue项目

2024-04-30 07:44:09

使用Vue cli创建Vue项目

第一步：安装node.js

安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

第二步：安装淘宝镜像

打开命令行工具，把这个（npm install -g cnpm --registry=https://registry.npm.taobao.org）复制（这里要手动复制就是用鼠标右键那个，具体为啥不多解释），安装这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。

第三步：安装vue-cli脚手架构建工具

打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

通过以上三步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

创建项目：vue create 加项目名

vue create hello-app

选择预设

项目构建成功

我们使用yarn启动项目

yarn

yarn serve

安装成功

引入element ui库

vue add element-plus

选择全面引用

语言选择zh-cn

关闭 serve。重新启动

yarn serve

在src文件夹下创建scss文件夹

移动文件至scss文件夹

修改scss文件路径

更改App.vue,作为程序主入口

路由文件

现在就可以访问两个页面了， / 和/about这两个页面

使用Vue cli创建Vue项目相关推荐

使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chrome ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...
Vue脚手架创建的项目的启动流程
Vue脚手架创建的项目的启动流程当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析首先从package.json中的脚本配置来看,np ...
VS Code安装VUE及创建VUE项目
VS Code安装VUE及创建VUE项目一.在搭建vue的开发环境之前,先下载node.js,vue的运行是要依赖于node的npm管理工具来实现,下载地址:http://nodejs.cn 二.n ...

最新文章

热门文章