一个月的前端学习,基本上的大致只是已经疏通了。
那么今天来分享一下一个基于Vue.js的前端项目
是如何从创建到简单开发到运行的趴。

开发前提:

1:安装node.js,因为vue项目运行依赖于node中的npm
地址 node.js下载地址 傻瓜式安装即可
可以全局环境变量(这里不再复述)
2:安装vscode,是开发前端非常好用的工具,里面的插件屡试不爽
地址vscode下载地址 一样的傻瓜式安装。安装完成以后可以下载自己需要的插件
这里罗列出一些
vetur
eslint(eslint语法很严谨,新手可以先禁用)
HTML CSS Support
Chinese(Simplied) Lang(中文包)
同时关于想直接在vscode开启一个终端的,也需要在setting里面做配置
文件-》首选项-》设置-》用户-》终端
在这里插入图片描述

3:dev-tools热部署,一款非常好用的扩展程序,实时看到自己更改的值,实时更新自己修改的代码等等,总之很好用。
地址链接:https://pan.baidu.com/s/17PpY8PnFuptkCQt5n251jg
提取码:inb2
上面的压缩包是我已经做好处理,只需要在谷歌浏览器上面配置就行
具体配置步骤看下面步骤
先解压上面的压缩包,
在这里插入图片描述
在这里插入图片描述

切换到 vue-devtools-5.1.1\vue-devtools-5.1.1\shells
找到chrome文件夹即可
在这里插入图片描述

刷新浏览器就可以使用了
打开调试工具会出现vue这个表示,当然有些盆友会说我的没有,有可能是没有刷新,关掉浏览器再试一下,或者是你打开的网页用的不是基于vue.js,那么也不会有vue这个标识
在这里插入图片描述


创建项目:

1、安装vue-cli

npm install -g @vue/cli

或者

cnpm install -g @vue/cli

cnpm安装命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

或者

yarn global add @vue/cli

注意:如果以及安装了vue-cli2的需要先卸载vue-cli2,再安装vue-cli3
查看vue-cli版本命令 vue -V
卸载命令:npm uninstall vue-cli -g
在这里插入图片描述

2、 检查版本 vue -V
在这里插入图片描述

3、 访问vue ui 不要关闭窗口,保持运行,否则页面访问不了哦
在这里插入图片描述

4、 开始创建
在这里插入图片描述
由于目录在C盘,我切换了一个目录
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
慢慢等待即可

完成以后是这样子的
在这里插入图片描述
目录结构如下
在这里插入图片描述


用vscode开发:

1、 现在可以用vscode进行开发了
2、 打开VScode
点击打开文件夹
在这里插入图片描述
导入项目
在这里插入图片描述
点击终端-》新终端
在这里插入图片描述

输入npm run serve
在这里插入图片描述

3、 访问页面成功在这里插入图片描述
好了 基础架子搭好了,后续有时间再更新如何进行路由配置,如何简单的做一个小项目实现基础功能。


Logo

前往低代码交流专区

更多推荐