[JavaScript知识库]【项目】小帽商城

小帽商城

一、技术架构

1. Vue前台项目

• vue + webpack + vuex + vue-router + axois + less
• 封装通用组件
• 登录注册
• token
• 守卫
• 购物车
• 支付
• 项目性能优化

2. Vue后台项目

• vue + webpack + vuex + vue-router + axois + scss + elementUI
• elementUI
• 菜单权限
• 按钮权限
• 数据可视化

二、Vue前台项目

1. vue-cli脚手架初始化项目

• node + webpack
• 初始化项目：终端 vue create app
• 启动项目：npm run serve
• node_modules 文件夹：项目依赖文件夹
• public 文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中
• src 文件夹（程序员源代码文件夹）：
  • assets 文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在assets文件夹里面静态资源，在webpack进行打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面。
  • components 文件夹：一般放置的是非路由组件（全局组件）
  • App.vue：唯一的根组件，Vue当中的组件（.vue）
  • main.js：程序入口文件，也是整个程序当中最先执行的文件
• babel.config.js：配置文件（babel相关）
• package.json文件：认为是项目身份证，记录项目叫做什么，项目当中有哪些依赖，项目怎么运行
• package-lock.json：缓存性文件
• README.md：说明性文件

2. 项目的其它配置

• 项目运行起来的时候，让浏览器自动打开

<!-- package.json -->
"scripts": {
	"serve" : "vue-cli-service serve --open",
	...
}

• eslint校验关闭
  • 在根目录下，创建一个vue.config.js