VUE项目开发流程 | 易学教程

前期准备

安装npm

安装webpack\vue-cli(2.9.6版本--版本不同可能会导致以下一些目录结构以及错误解决办法不符合实际情况)

创建项目

初始化创建项目，项目名称、项目描述、拥有者等等信息，

D:\code\self>vue init webpack common-component

? Project name common-component  # 项目名称
? Project description A Vue.js project # 项目描述
? Author XXX <lingxi_danx@sina.com> # 项目拥有者
? Vue build standalone
? Install vue-router? Yes # 路由配置
? Use ESLint to lint your code? Yes # 启用eslint检测
? Pick an ESLint preset Standard
? Set up unit tests No # 单元测试
? Setup e2e tests with Nightwatch? No # e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 是否在项目创建以后执行npm install命令，有三个选项，我选择的第一个，所以会自动执行npm install命令，需要等待一段时间，时间较长；想自己执行的可以选择第三个

   vue-cli · Generated "common-component".

目录结构

├ build   进行webpack的一些配置
    ├ build.js
    ├ check-versions.js
    ├ utils.js
    ├ vue-loader.conf.js
    ├ webpack.base.conf.js
    ├ webpack.dev.conf.js
    ├ webpack.prod.conf.js
├ config 比较重要的是index.js，主配置文件，参阅开发期间的API代理和后端框架集成
    ├ dev.env.js
    ├ index.js
    ├ prod.env.js
├ node_modules 执行了`npm install`命令之后的文件夹
├ src 大部分代码都写在这里
    ├ assets: 放置一些图片，如logo等
    ├ components:  组件文件目录
    ├ App.vue: 项目入口文件，也可以直接将组件写这里，而不使用 components 目录
    ├ main.js: 项目的核心文件。
├ static 不想使用Webpack进行处理的静态资源，将被直接复制到生成webpack建立资产的同一个目录中
├ index.html 应用程序的模板index.html。 在开发和构建期间，Webpack将生成的URL自动注入到此模板中以呈现最终的HTML。
├ package.json 所有构建依赖项和构建命令的NPM软件包元文件
└─│

创建绝对路径

在页面中开发时常常需要引用子组件，比如引入helloworld.vue组件

import hello from '../../components/pages/helloWorld'

路径多层嵌套，很容易出现问题，如果使用绝对路径又会路径过长，可以在webpack.config.js文件中创建绝对路径

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.join(__dirname, "src"),
      '@components': path.join(__dirname, "src", "components"),
      '@static': path.join(__dirname, "static"),
    }
  },

使用：

import hello from '@components/pages/helloWorld'

来源：https://www.cnblogs.com/fengzzi/p/10882611.html

标签

vue

Webpack

绝对路径

eslint