【项目实战】Vue商城

【项目实战】Vue商城
1、vue 文件目录分析

vue create 项目名称
目录分析
public文件夹：静态资源，webpack 进行打包的时候会原封不动打包到 dist 文件夹中。

pubilc/index.html是一个模板文件，作用是生成项目的入口文件，webpack 打包的 js,css 也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的 index.html。

src文件夹（程序员代码文件夹）

src/assets： 存放公用的静态资源
src/components： 非路由组件（全局组件），其他组件放在 views 或者 pages 文件夹中
src/App.vue： 唯一的根组件
src/main.js： 程序入口文件，最先执行的文件

babel.config.js: babel 配置文件，把 es6 翻译成 es5
package.json：看到项目描述、项目依赖、项目运行指令
package-lock.json: 缓存性文件（各种包的来源）
README.md: 项目说明文件

2 项目配置

1、项目运行，浏览器自动打开
package.json中 "serve": "vue-cli-service serve --open",
```
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
 
```
2、关闭 eslint 校验工具、开启自动刷新
（不关闭会有各种规范，不按照规范就会报错）

vue.config.js ,进行配置
```
module.exports = {
  //默认打开地址http://localhost:8080/
  devServer: { 
    host: 'localhost', 
    port: 8080, 
  },
  //关闭eslint
  lintOnSave: false
  }
 
```
3、src 文件夹配置别名,jsconfig.json，用@/代替src/，exclude表示不可以使用该别名的文件
```
 {
    "compilerOptions": {
        "baseUrl": "./",
            "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
 
    "exclude": [
        "node_modules",
        "dist"
    ]
 }
```
4、路由的配置

2 个非路由组件，四个路由组件

两个非路由组件：
Header 【首页、搜索页】
Footer【在首页、搜索页】在登录页是没有的

路由组件：
Home、
Search、
Login（没有底部的 Footer 组件，带有二维码的）、
Register（没有底部的 Footer 组件，带二维码的）

开发一个前端模块可以概括为以下几个步骤：
（1）写静态页面、拆分为静态组件；
（2）发请求（API）；
（3）vuex（actions、mutations、state 三连操作）；
（4）组件获取仓库数据，动态展示；

5、组件页面样式
        组件页面的样式使用的是 less 样式，浏览器不识别该样式，需要下载相关依赖
        npm install --save less less-loader@5
        如果想让组件识别 less 样式，则在组件中设置

1、vue 文件目录分析

2 项目配置