1、安装Nodejs
https://nodejs.org/zh-cn/download/
下载对应操作系统的安装包
检查:node -v
2、安装vue3.0
- 卸载旧版本:
npm uninstall vue-cli -g - 安装新版本:
npm install -g @vue/cli - 检查:vue -V
- 安装卡顿解决办法
1)安装国内cnpm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
后续使用cnpm命令替换npm命令
2)使用代理registry
npm config set registry https://registry.npm.taobao.org
3、创建Vue3.0项目
vue create vue3demo
选择对应版本后回车
4、目录说明
- node_modules
项目依赖包,包括很多基础依赖,用户也可以使用nmp install [依赖包名]安装其他依赖 - public
公共资源目录,包含图片和HTML文件等。index.html是主入口文件,打包时复制里面文件到dist目录。
-src
源文件目录,包括以下内容:
assets:静态资源
components:组件
router:路由
store:容器
view:视图组件
App.vue:项目入口
main.js:脚本入口
5、运行vue项目
进入项目目录下,执行命令:
npm run serve
6、安装VSCode
下载地址:
https://code.visualstudio.com/
https://pc.qq.com/detail/16/detail_22856.html
- 安装插件:Ctrl+Shift+X
- 常用插件:
Chinese (Simplified) (简体中文) Language:中文语言包
Auto Close log:自动补全HTML标签
Auto Rename Tag:自动重命名成对标签
HTML CSS Support:语法提示
jQuery Code Snippets:JQuery语法提示
Vetur:官方插件
Beautify:代码美化
Bracket Pair Colorizer:括号分组变色
Debugger for Chrome:调试工具
ESLint:js语法纠错,可以自定义配置,不过配置较为复杂
Path Intellisense:自动提示文件路径,支持各种快速引入文件