前端路线--Vue（day05）

Vue脚手架零碎笔记

/* 
脚手架工具：
1.安装vuecli
npm install -g @vue/cli     //全局安装脚手架
2.查看版本号:
vue --version
3.创建项目:(在一个目标文件夹中,输入栏输入cmd)
vue create myvue(项目名称)
注意:小写字母,不要汉字
4.设置：
会出现多个选项有:
Vue3.x的项目
Vue2.x的项目(此处选这个)
个性化创建
5.完成创建后:
第一步:cd myvue //进入项目
第二步:npm run serve //启动项目

6.打开方式
http://localhost:8080  本地打开
http://192.168.0.133:8080/  局域网中打开
*/

/* 
项目目录的介绍(见图)
myvue:项目名称
node_modules:模块
public:静态资源
src:项目的开发目录
assets:静态资源目录(css,img,js)
components:公共的组件
App.vue:根组件
main.js:js文件的总入口
.gitignore:git的配置文件
babel.config.js编译项目的配置文件
jsconfig.json:js配置文件
package-lock.json:包配置文件
package.json:包配置文件
README.md:项目说明
vue.config.js:vue项目的配置文件

*/

/* 
 xxx.vue文件的命名规则:
    使用大驼峰命名,否则会出错(HeaderPage.vue)
*/


/* 
vue的文件结构(见图):
<!--  -->
<template>
  <div class="">所有的html结构写在这里</div>
</template>
注意：<!-- template中必须有一个根标签包裹着其它所有元素 -->


<!--js在script中编写 -->
<script>
export default {};
</script>

<!--在style中可以写样式
    在style中添加scoped，说明这里的样式只能在该文件中使用（起到一个样式保护作用）
-->
<style scoped>
</style>


注意:
1.<template>标签中必须有一个根标签包裹着其他元素,里面写html结构
2.<script>标签中写js代码
3.<style scoped>标签中写样式,scoped:样式只会在该文件中使用,起到一个保护作用,一般不加。
*/

//下载Vetur插件

/* 
代码片段的安装:
1.复制代码--用户代码片段--新建代码片段--删除源代码--粘贴保存
2.新建.vue文件--回车即可
*/

/* 
Vetur提示找不到package.json
解决办法:将vue项目放在编辑器的根目录
*/


/* 
移动端知识补充：
移动端的规范都是按照苹果手机标准。
微信： 按照iphone6设计标准来开发的。
ipone6的分辨率: 705 * 1334 在PC端查看： 375 * 667

移动端单位: rem
1. rem是相对于根元素的, 设置样式时以375宽为基准来设置。

在assets文件夹下创建css文件夹-- > base.css
1. 设置根元素:
    html, body {
        font - size: 10 px;
    }
iphone6p的基准
@media screen and(min - width = 414 px) {

    html,
    body {
        计算： 基准(10)*414/375=11.04 
font - size: 11.04 px!important;
}

}
2. 在App.vue中引入:
    @import url("./assets/css/base.css");
    注意: 在App.js中设置的样式其他页面都有效果 

3.在App.vue中引入文件：
import HeaderPage from "./components/HeaderPage.vue";
* /


/* 
    步骤：
    1.新建文件 xxx.vue
    2.在app.vue里使用
    3.引入import...from...
    4.将引入的内用注册成组件
        export default {
        name: "App",
        components: {
        HelloWorld,
        FooterPage, //将FooterPage注册为组件
        HeaderPage, //将HeaderPage注册为组件
        },
        };
    5.在<template>中使用  单标签/双标签都可以
*/


/* 
iphone6的标准：
状态栏高：40px
导航栏高：88px
标签栏高：98px
在PC端都除以2
*/

/* 
安装插件:px to rem
设置--搜cssrem--cssrem congiguration--cssrem:Root FontSize--设置为10
1em=多少就写多少
*/


/* 
Vue中使用less
    在vuejs中默认不支持less,需要先下载模块
    vue2.x下载less需调整版本号
    cnpm install less@3 less-loader@5 --save
    less@3:让vue支持less
    less-loader@5:为了加载less文件
使用less
    <style lang="less"></style>
*/

项目目录介绍

vue文件的样式