vue-cli脚手架初始化项目

最新推荐文章于 2024-09-17 19:53:39 发布

zsl2010zsl

最新推荐文章于 2024-09-17 19:53:39 发布

阅读量184

点赞数

文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/zsl2010zsl/article/details/124677655

版权

本文详细介绍了使用Vue创建项目的基本步骤，包括通过`vuecreate`初始化项目，解析了项目结构，如`node_modules`、`public`、`src`等文件夹的作用。此外，还讲解了如何配置项目使其在启动时自动打开浏览器，关闭`eslint`校验，以及设置别名`@`以简化路径引用。最后，提到了`package.json`和`jsconfig.json`在项目配置中的作用。

摘要由CSDN通过智能技术生成

环境

node + webpack +淘宝镜像

1 创建项目

vue create app

在这里插入图片描述

node-modules文件夹：项目依赖文件夹
public文件夹：一般防止一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹。
src文件夹（程序员源代码文件夹）：
assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要追，放置在assets文件夹里面的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面
components文件夹：一般放置的是非路由组件（全局组件）
App.vue：唯一的根组件，Vue当中的组件（.vue）
main.js：程序入口文件，也是整个程序当中最先执行的文件
babel.config.js：配置文件（babel相关）
package.json文件：认为项目‘身份证’，记录项目叫做什么、项目当中有哪些依赖、项目怎么运行
package-lock.json：缓存性文件
README.md：说明性文件

2 项目配置

2.1 项目运行起来的时候，让浏览器自动打开

---package.json
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

2.2 eslint校验功能关闭

—在根目录下，创建一个vue.config.js

module.exports = defineConfig({
  // 关闭eslint
  lintOnSave: false
})

2.3 src文件夹简写方法，配置别名 @

jsconfig.json配置别名@提示【@代表src文件夹，这样将来文件过多，找的时候方便很多】

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}