【前端 Vue 项目 (一)】第一部分 项目的搭建

1. 创建项目

  1. 使用 vue create super_mall在命令行创建一个vue项目。

2. 划分目录结构

项目主要的目录结构

3. 引入并初始化样式

  1. 使用 normalize.css进行初始化, normalize.css的githup地址

  2. 创建一个base.css,在其中引入 normalize.css

  3. App.vue中引入base.css

/* 引入基础的 css */
  @import './assets/css/base.css';

4. 为路径起别名

4.1 在 VueVLI3以后如何为路径起别名?

  1. 在项目中创建一个vue.comfig.js的文件,进行配置,该文件的内容会覆盖原来的配置。
module.exports = {
  configureWebpack: {
    resolve:{
      /* 配置别名 */
      alias:{
        /* 默认配置 @ 对应 src 路径 */
        'assets':'@/assets',
        'common':'@/common',
        'components':'@/components',
        'network':'@/network',
        'views':'@/views'
      }
    }
  }
}

4.2 代码编写规范配置

  1. 项目中有个 .editorconfig的文件用于规范代码的编辑:
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

推荐阅读更多精彩内容