尚品汇项目.md

##这是一个vue实战项目，尚品汇电商平台，类似京东电商项目。 ###Vue前台项目 技术架构：vue+webpack+vuex+vue-router+axios+less 封装通用组件 登录注册 token 守卫 购物车 支付 项目性能优化

###Vue后台项目 技术架构：vue+webpack+vuex+vue-router+axios+scss+elementUI ElementUI 菜单权限 按钮权限 数据可视化:echarts,canvas,svg

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

环境：node+webpack node-moudles文件夹：项目依赖文件夹 public文件夹：一般放置一些静态资源，webpack进行打包时会原封不动打包到dist文件夹中 src文件夹： assets:放置静态资源，一搬放置多个组件共用的静态资源，webpack进行打包时会把静态资源当作一个模块，打包JS文件里面 components文件夹:一搬放置的是非路由组件 App.vue:根组件 main.js：程序的入口文件，程序执行的组件 package.json文件:记录项目的信息

2.基本配置

让项目运行起来时自动打开浏览器：

--package.json:
 "serve": "vue-cli-service serve --open",

eslint校验工具关闭： ---在根目录下创建一个Vue.config.js文件

module.exports = {
    //关闭eslint
    lintOnSave: false
}

src文件夹简写方法，配置别名@ jsconfig.json配置别名@提示

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*":[
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}
如果报错，打开设置将check js勾选

3.项目路由分析

前端所谓路由：kv键值对 key:URL(地址栏中的路径) value:响应的路由组件 注意：项目是上中下结构

路由组件： Home首页路由组件，search路由组件，login路由组件，register路由组件 非路由组件： Header[首页，搜索页] Footer[首页，搜索页]，登录页没有

4.完成非路由组件Header与Footer业务