day01-尚品汇-2022年4月3日21:41:25

初始化项目

1. vue-cli初始化项目，需先下载node，并设置淘宝镜像

2. 进入项目文件夹，打开cmd

   vue create app
   

   选择vue 2，等待下载完成，进入文件夹，通过vscode打开

node_models文件夹：项目依赖文件夹

public文件夹：一般放置静态资源（图片）

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

• assets文件夹：一般放置静态资源（多个组件共用的静态资源）
• components文件夹：一般放置的是非路由组件（全局组件）
• App.vue：唯一的根组件
• main.js：程序入口文件
• babel.config.js：配置文件
• package.json：记录项目中的文件依赖
• package-lock.json：缓存文件

准备工作

关闭eslint校验工具

创建vue.config.js文件：需要对外暴露

module.exports = {
   lintOnSave:false,
}

src文件夹的别名的设置

创建jsconfig.json文件

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/": [
                "src/"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

事实上，在这个项目之后的vue以及自动帮你配置好了，所以这一步不用动手。

创建组件

非路由组件使用分为几步:
第一步：定义
第二步：引入
第三步：注册
第四步:使用

项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法

1：安装less less-loader@5
切记less-loader安装5版本的，不要安装在最新版本，安装最新版本less-loader会报错，报的错误setOption函数未定义

2:需要在style标签的身上加上lang=“less”,不添加样式不生效