## 简介:
Vue3 的正式版发布了,两年多的开发,99 位贡献者的努力 ,2600 次提交 628 次 PR,在 2020 年 9 月 19 日 Vue3 更新了 正式版本,正式版本一出,代表着不会再有太大的改动了,也意味着你可以开始学习了,这篇文章主要介绍下vue-cli3.0项目搭建 ,分享给大家
1.卸载旧的 vue-cli2 版本的脚手架
npm uninstall -g vue-cli
2.安装新的 vue-cli3 版本的脚手架
npm install -g @vue/cli
检查版本命令为:
vue --version
3.搭建项目
vue create 项目名称 //回车
4.选择配置项:
翻译就是:您的默认npm注册表的连接似乎很慢。使用https://registry.npm.taobao.org更快的安装,也就是淘宝镜像cnpm,Yes/No都行 不影响
Default([Vue 2] babel,eslint):搭建 vue2.0一个新项目的原型,package.json配置文件vue版本:vue:2.0+。
Default([Vue 3] babel,eslint):搭建 vue3.0一个新项目的原型,package.json配置文件vue版本:vue:3.0。
Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包。
5.运行:
$ cd vue_test
$ npm run serve //运行
项目文件结构:
|-node_modules -- 所有的项目依赖包都放在这个目录下
|-public -- 公共文件夹
---|favicon.ico -- 网站的显示图标
---|index.html -- 入口的html文件
|-src -- 源文件目录,编写的代码基本都在这个目录下
---|assets -- 放置静态文件的目录,比如logo.pn就放在这里
---|components -- Vue的组件文件,自定义的组件都会放到这
---|App.vue -- 根组件,这个在Vue2中也有
---|main.ts -- 入口文件,因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts -- 类文件(也叫定义文件),因为.vue结尾的文件在ts中不认可,所以要有定义文件
|-.browserslistrc -- 在不同前端工具之间公用目标浏览器和node版本的配置文件,作用是设置兼容性
|-.eslintrc.js -- Eslint的配置文件,不用作过多介绍
|-.gitignore -- 用来配置那些文件不归git管理
|-package.json -- 命令配置和包管理文件
|-README.md -- 项目的说明文件,使用markdown语法进行编写
|-tsconfig.json -- 关于TypoScript的配置文件
|-yarn.lock -- 使用yarn后自动生成的文件,由Yarn管理,安装yarn包时的重要信息存储到yarn.lock文件中