RuntimeErrorz
CV | FE
Vue项目的搭建和项目结构的理解
现在该用Vite啦！
- 安装Node.js；
- 安装npm；
- 安装vue-cli脚手架构建工具，运行命令
npm install --global @vue/cli； - 运行如下命令
vue create projectname - 具体的文件结构解释如下：
node_modules文件夹：一些必须的依赖在开发测试时需要，实际打包后并不会有那么多；public文件夹：一些WebPack编译过程中没有加工处理过的文件（有一个例外：index.html 会有一些处理），一般不做修改；- src文件夹：
main.js：这是应用的入口文件。目前它会初始化 Vue 应用并且制定将应用挂载到index.html文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。App.vue：这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。components：这是用来存放自定义组件的目录，目前里面会有一个示例组件。assets：这个目录用来存放像 CSS 、图片这种静态资源，但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS或者 Stylus；
.browserslistrc：Browserslist 的配置文件，可以通过它来控制需要对哪些浏览器进行支持和优化。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。根据提供的目标浏览器的环境智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量；.eslintrc.js：eslint 的配置文件，可以通过它来管理你的校验规则；babel.config.js：Babel 的配置文件，可以在开发中使用 JavaScript 的新特性，并且将其转换为在生产环境中可以跨浏览器运行的旧语法代码。你也可以在这个里配置额外的 babel 插件；package.json：每个项目的根目录下面，一般都有一个 package.json 文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。package.json 文件可以手工编写，也可以使用npm init命令自动生成；- (1) 波浪号（tilde）~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
- (2) 插入号（caret）ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。
- (3) latest：安装最新版本
package-lock.json：使用npm install命令生成。描述 node_modules 文件中所有模块的版本信息，模块来源及依赖的小版本信息。当版本升级，使用 npm install 命令时，会安装 package.json 中指定的大版本的最新版本。如 package.json 中指定版本”dependencies”: { “webpack”: “^2.0.0” }，则 package-lock.json 会按照 {“webpack”: “2.7.0”} 版本升级。在保证大版本号前提下的最新版本。webpack “2.7.0” 是 “2.x.x” 的最高版本。如果改了package.json，且package.json和lock文件不同，那么执行npm i时npm会根据package中的版本号以及语义含义去下载最新的包，并更新至lock。如果两者是同一状态，那么执行npm i都会根据lock下载，不会理会package实际包的版本是否有新。
- 运行npm run serve即可在浏览器的localhost中看到Vue的Hello World界面。