Vue2电商实战项目

单页面应用

• 分为3层

  • 结构层(template)

  • 样式层(style)

  • 行为层(script)

• 入口文件main.js:程序最开始执行的文件

• babel:就是翻译官,比如ES6语法转换成ES5语法

脚手架使用

- 命令行创建项目: vue create 项目名称

- node_modules:放置项目依赖的地方

- public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面

- src：开发者源代码文件夹

  - assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
  - components文件夹:一般放置非路由组件（或者项目共用的组件）
  - App.vue 唯一的根组件
  - main.js 入口文件【程序最先执行的文件】
  
- babel.config.js:babel配置文件(翻译官)

- package.json：看到项目描述、项目依赖、项目运行指令(项目身份证)

- README.md:项目说明文件
  

• 常用的项目配置项

- 浏览器自动打开: 

	- 在package.json文件配置

        "scripts": {
         "serve": "vue-cli-service serve --open", // 添加 --open参数
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint" // 新增
        },
        
    - 在 vue.config.js文件添加配置(如果不添加host地址,默认跳转到0.0.0.0:8080)
    
    	const { defineConfig } = require('@vue/cli-service')
            module.exports = defineConfig({
              transpileDependencies: true,
              devServer: { // 新增配置
                open: true,
                host: 'localhost',
                port: 8080
              }
            })

- 关闭eslint校验工具

    // vue.config.js
    module.exports = {
       lintOnSave:false,
    }
    
    
3.3 src文件夹的别名的设置
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
创建jsconfig.json文件
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}