【原创】Vue 项目实战

创建项目

使用 vue-cli 初始化项目
vue create proname
需要 node + webpack + 淘宝镜像

项目目录说明

node_modules : 项目依赖目录
public : 一般放置静态资源（图片），需要注意，放在 public 文件夹中的静态资源，webpack 进行打包时会原封不动打包到 dist 文件夹中。
src :源代码文件夹。
src/assets: 放置静态资源，一般放置多个组件共用的静态资源。webpack 在打包时会将这些资源打包到 JS 文件夹中。
src/components：放置非路由组件或全局组件。
App.vue 是项目中唯一的根组件。
main.js：程序的入口文件，也是整个程序最先执行的文件。
babel.config.js：配置文件，与 babel 相关。
package.json：记录项目信息、项目依赖、项目运行命令。
package-lock.json：缓存性文件，第一次下载慢，第二次下载快，就是该文件起的作用。
README.md：项目说明文件。

项目配置

项目运行时让浏览器自动打开

在 package.json 文件中找到 "serve": "vue-cli-service serve" 修改为："serve": "vue-cli-service serve --open --host localhost" 即可。

关闭 eslint 校验工具

在 vue.config.js 中，设置：

module.exports = defineConfig({
  lintOnSave: false
});

为 src 文件夹配置别名

jsconfig.json 文件中：

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

安装 Element UI

npm i element-ui -S

安装 axios

npm i axios

项目路由分析

使用 Vue-Router 实现，前端路由即为键值对，key 为路径，value 为相应的路由组件。