vue电商实战 前端篇
文章目录
前言
提示：
项目参考B站AV号：BV1Vf4y1T7bw
文章为个人学习心得 如有冒犯 call me！
一、创建vue-cli脚手架
1.创建文件夹 vue商城实战项目 并 使用 webstorm 打开
2.在下方 Terminal（终端）输入 vue create vue(项目名称)
3.选择默认 vue2 回车键 安装
4.安装成功后 就可以看到我们项目里面多了个vue文件夹
1.运行项目
终端下输入 npm run serve
http://localhost: 本机地址
8081：本机端口号
报错问题
This is related to npm not being able to find a file.（这与npm无法找到文件有关。）
原因：下方终端的项目地址不对 要切换到 我们项目目录名为 vue下
使用：终端下使用 cd vue
2.项目初始化结构解析
node_modules:项目所依赖的环境包
public：公共文件夹 用于存放共用的静态资源（例如 图片 .html .vue）注：使用webpack进行打包时 会将 public 里面的资源统一打包到 dist文件夹中
src:(存放程序主要的源代码)
assets:一般也是存放静态资源（组件共用的静态资源） 注：打包 webpack --》 打包在 JS 文件里
components:存放 全局组件（非路由组件）
App.vue:名为 根组件 可控制全局页面的布局
main.js:程序入口文件 程序运行起来最先执行的文件
babel.config.js:配置 babel相关的文件
package.json:记录 项目的版本号 项目依赖包及版本号 项目的运行方式
package-lock.json:存放缓存性文件
README.md:项目说明书
3.项目的基本配置
1.关闭eslint提示
这里我们声明变量a=‘我是eslint错误提示’
运行项目后 系统就会报错 说我们变量a声明了但未使用
因此我们需要在 vue 目录下 创建文件夹 vue.config.js
module.exports = {
productionSourceMap:false,
// 关闭ESLINT校验工具
lintOnSave: false,
};
2.配置别名
文件夹 vue下创建 jsconfig.js
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"] //配置 @字符下查找的文件夹路径为 src下的所有 例如 src/a/b.png=@/a/b.png
}
},
//不包括以下文件夹
"exclude": ["node_modules", "dist"]
}