Vue(1):用Vue-cli构建Vue3项目

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

node -v

以上node版本位14.15.0满足Vue3项目的创建条件（Vu3需要node 版本8以上）

为什么需要安装node?

vue项目需要在node运行环境下进行、VUE项目==文件类型是.vue他是需要被编译成.js文件，才可以被浏览器识别

npm -v

npm 是node内置的资源管理器、这里使用淘宝的镜像源

设置镜像源：npm config set registry
查看镜像源： npm config get registry

npm install -g @vue/cliy

安装过程中可能出现卡顿情况、Ctrl+C停止后可重新执行命令

以上情况表示安装成功。在创建项目之前一起来了解一下Vue CLI 和 Vue的区别

vue create vue3-demo

以上我选择第二个并创建项目、创建命令

vue create vue3-demo

vue3-demo创建的项目名称、等待创建成功后如下（左上角为vue3项目结构）相关命令可查看README.md详情

cd vue3-demo --切换项目路径
npm run serve --注意此处是serve而不是server

如上图标识基础的Vue3项目创建成功

node_modules:用于存放我们项目的各种依赖，比如axios等等，没有moudles文件，项目就没法运行，可以使用 npm install进行项目依赖的安装
public:用于存放静态文件
public/index.html:是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html
src:我们存放各种vue文件的地方
src/assets:用于存放各种静态文件，如图片等
src/compnents：用于存放我们的公共组件，如 header、footer等
src/APP.VUE:主vue模块引入其他模块，app.vue是项目的主组件，所有页面都是在app.vue下切换的
src/main.js:入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂在一些变量
gitignore:git上传需要忽略的文件格式
babel.config.js:是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本
package-lock.json:是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
package.json:模块基本信息项目开发所需要模块，版本，项目名称