简单Vue项目(一)---创建一个基于Vue.js的前端项目全部流程之基础搭建 - Go语言中文社区

简单Vue项目(一)---创建一个基于Vue.js的前端项目全部流程之基础搭建

一个月的前端学习，基本上的大致只是已经疏通了。
那么今天来分享一下一个基于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.1vue-devtools-5.1.1shells
找到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、访问页面成功
好了基础架子搭好了，后续有时间再更新如何进行路由配置，如何简单的做一个小项目实现基础功能。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_41518597/article/details/108503853
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-16 23:35:04

分类：前端