vue-cli脚手架初始化项目+(node + webpack + 淘宝镜像)

1:vue-cli脚手架初始化项目。 node + webpack + 淘宝镜像

本地目录安装webpack 安装webpack之前需要先安装一个npm的包管理的配置文件 npm init -y 然后在安装⬇️ npm install webpack webpack-cli --save-dev

安装项目 vue create app (app)是项目名

node_modules文件夹:项目依赖文件夹

public文件夹:一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中

src文件夹（程序员源代码文件夹）： assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在assets文件夹里面静态资源，在webpack打包的时候，wekpack会把静态资源当作一个模块，打包js文件里面

components文件夹：一般放置的是非路由组件（全局组件）
​
App.vue: 唯一的跟组件，Vue当中的组件（.vue）
​
main.js:程序入口文件，也是整个程序当中最先执行的文件

babel.config.js:配置文件（babel相关）

package-lock.json:缓存文件

package.json文件：认为项目“身份证”，记录项目叫做什么，项目当中有那些依赖，项目怎么运行

README.md:说明性文件 npm install 安装依赖 npm run serve 项目运行 npm run build 项目打包 npm run lint 终端运行修改代码样式

2:项目的其他配置 jsconfig.json配置别名@提示

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

1. 完成非路由组件Header与Footer业务 在咱们项目中，不在以HTML+css为主，主要搞业务，逻辑在开发项目的时候： 1：书写静态页面（HTML+css） 2: 拆分组件 3：获取服务器的数据动态展示 4：完成相应的动态业务逻辑

注意1：创建组件的时候，组件结构 + 组件的样式 + 图片资源

注意2：咱们项目采用的less样式，需要通过less，less-loader【安装5版本的】进行处理less，把less样式变为css样式，浏览器才可以识别

5)路由组件的搭建 vue-router 在上面分析的时候，路由组件应该有四个: Home, Search, Login, Register -components文件夹: 经常放置的非路由组件（共用全局组件） -pages|views文件夹: 经常放置路由组件 5.1配置路由 项目当中配置的路由一般放置在router文件夹中

5.2总结 路由组件与非路由组件的区别 1：路由组件一班放置在pages|views文件夹，非路由组件一般放置在components文件夹中 2：路由组件一般需要放置在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都以标签的形式使用 3：注册完路由，不管路由路由组件，还是非路由组件身上都有$route，$router文件夹中

$route:一般获取路由信息【路径，query，params等等】 $router：一般进行编程式导航进行路由跳转【push|replace】

5.3路由的跳转？ 路由的跳转有两种形式： 声明式导航router-link, 可以进行路由的跳转 编程式导航push|replace, 可以进行路由的跳转

编程式导航：声明式导航都能做，编程式导航都能做， 但是编程式导航除了可以进行路由跳转，还可以做一些其他的夜幕逻辑

6)Footer组件显示与隐藏 显示或隐藏组件：v-if|v-show Footer组件:在Home,Search显示Footer组件 Footer组件:在登陆，注册时候隐藏的

6.1我们可以根据组件身上的$router获取当前路由的信息,通过路由路径判断Footer显示与隐藏. 6.2配置路由的时候，可以给路由添加原信息【meta】,路由需要配置对象，它的key不能瞎写，乱写

8)路由传参

8.1：路由跳转有几种方式? 比如：A->B 声明式导航：router-link（务必要有to属性），可以实现路由的跳转 编程式导航：利用的是组件实列的$router,push|replace方法，可以实现路由的跳转。（可以书写一些自己的业务）

8.2：路由传参，参数有几种写法？ params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v$kv=,不需要占位