讲在前面

假设你已了解关于 HTML、CSS、 JavaScript 和 vue 的中级知识。如果你刚开始学习前端，将此作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它语言的使用经验会有帮助，但这不是必需的。

webpack构建项目

首先我认为你已经安装vue, node环境 if ( none ) { return quit }

或者你想继续前行可以在电脑管家-软件管理里面下载node(这将会自带vue环境,且自带环境变量)

非win10系统可能会出现node版本过高问题,可以百度下载低版本安装包进行安装,msi为安装包版,安装自动设置环境变量

命令行输入 node -v 出现node版本则已安装好, vue -v 同理注意有-v前空格

现在进入到你想创建项目的目录(最好不要有出现中文目录 – 我不仅仅是针对node,而是针对所有软件)

安装vue-cli新版,如有旧版请先卸载再安装:

npm uninstall -g @vue/cli       //这是卸载

npm install -g @vue/cli         //这是安装

创建项目:

npm init @vitejs/app vue-tj     //vue-tj是项目名称

If( downloading template…转很久或出错 ) ctrl+c停止等待–输入下面代码更换源 --再重新创建:

npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver

我选择的vue:

代码编辑器

我用到的工具是Visual Studio Code,或你们也可以选择你们顺手的工具
打开电脑管家 - 软件管理搜索vscode 直接安装即可

打开Visual Studio Code,里面有些方便你写代码的插件,具体看心情
将刚创建的项目导入到Visual Studio Code

依赖修改

加入一些常用的依赖,打开package.json文件,替换dependencies原先的依赖,假如遇到依赖不兼容问题请自行百度解决

  "dependencies": {"vue": "^3.0.5","axios": "^0.21.1","better-scroll": "^2.0.5","core-js": "^3.6.5","element-plus": "^1.0.2-beta.35","js-md5": "^0.7.3","lib-flexible": "^0.3.2","pushstate-server": "^3.1.0","vant": "^3.0.0-beta.5","vue-router": "^4.0.0-beta.13","vue2-verify": "^1.1.5","vuex": "^4.0.0-beta.4"},

下载依赖:

npm install

出现的问题: npm 警告axios ^0.20.0存在漏洞已弃用建议更换^0.21.1(没问题直接启动)
替换版本后更新依赖:

npm update

启动:

npm run dev

打开浏览器创建项目成功

码云代码地址

码云项目地址直达

https://gitee.com/xiaozhiren/tj-vue

从零开始搭建一个管理系统-vue3.0项目创建-----1相关推荐

vue3.0项目创建
vue3.0项目创建可视化创建(手脚架) 命令行创建可视化创建(手脚架) 1.win+R打开cmd命令行 2.输入vue ui 打开手脚架 vue ui 3.打开项目管理器,选择创建 4.选择项目 ...
从零开始搭建一个web图书管理项目（增删改查功能）
参考资料:https://blog.csdn.net/qq_23994787/article/details/73612870 http://how2j.cn/ 实习第一周,写下一些在建立web项目中 ...
python django廖雪峰_如何用Django从零开始搭建一个网站（0）
python,django等安装就直接略过了.下面直接奔如主题,搭建网站. Step1:新建一个django project,运行命令:'django-admin startproject myPit ...
从零开始搭建口袋妖怪管理系统(3)-实现一个简单的SPA管理系统
一.目标上一章我们完成了口袋妖怪的细节展示页面,这次我想要把总计划的框架搭起来,也就是建立起一个口袋妖怪SPA管理系统,包含口袋妖怪.技能.树果.道具.游戏这样五个模块,并且能够通过导航平滑跳转到指 ...
从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上)
"手动是不可能手动的了,这辈子都不可能手动的了." 一.目标上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变 ...
手把手教你vue3.0项目搭建
前言:最近公司想重构一个项目,CTO选择了vue3.0 + ant-design-vue技术栈,正好自己也想尝试一下,试着搭建一下,以后有更好的会及时补充修改注:粗体是命令指令,推荐使用cnpm指令 ...
github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
【React进阶-1】从0搭建一个完整的React项目（入门篇）
这篇文章带领大家从零开始手动撸一个React项目的基础框架,集成React全家桶.万字长文,请各位有足够的时间时再来阅读和学习. 概述平时工作中一直在用React提供的脚手架工具搭建React项目, ...
spring boot：从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器
spring boot:从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器一.Mybatis plus代码自动生成器 1.引入配置 2.创建Controller 3.执行m ...

从零开始搭建一个管理系统-vue3.0项目创建-----1