vue-vue项目创建、es6导入导出语法、scoped使用

标签：es6 vue name HelloWorld js scoped 组件 页面

1.vue-cil下载和创建

1.1 下载

安装vue-cli:
	我们使用npm(并行)下载是是从国外的网站下载，所以速度会比较慢，建议使用cnpm(串行)，cnpm要从淘宝镜像下载。
	步骤:
		1.安装cnpm(-g表示装全局，此后npm的命令使用cnpm替换一下即可):
npm install -g cnpm --registry=https://registry.npm.taobao.org

		2.使用cnpm装vue-cil:
cnpm install -g @vue/cli
	此后cmd控制台就可以输入vue命令(装了django可以使用django-admin创建django项目)

1.2 创建

1.创建:
	vue-cil可以创建vue2.x、vue3.x。
	vue3只能用vite创建。

2.使用vue-cil创建项目:
	vue create myfirstvue

3.接下来会出现:
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? (Y/n)
的提示信息，是在询问是否使用镜像仓库，选择是:
# 1

4.按照以下步骤选择:
在创建过程中如果很慢，可以用一下命令清理缓存，再进行安装:
npm cache clean --force
"""
很慢的原因:
	从github拉一个空项目
	按照该项目所有的依赖，npm装
"""
# 2 3 4 5 6 7 8 8-1

1.3 使用vue ui创建

1.在命令行输入vue ui，会出现如下界面，并且会弹出Vue Project Manager页面:
"""
cmd窗口刚开始默认的路径是:C:\Windows\System32>，在这个路径下创建新项目页面有可能一直刷新，创建项目点不动。可以先在cmd窗口切换到其他盘新建一个目录，再创建
""" 
# 9 10 11 12 13 14 15 16 17

2.vue项目目录介绍

1.用pycharm打开vue项目目录结构如下:
# 18
2.运行vue项目的两种方式:
    方式一:
    1.执行想项目需要在pycharm命令行根目录下执行:
    npm run serve

    2.成功后点击:
    App running at:
    - Local:   http://localhost:8080/ 
    - Network: http://192.168.1.45:8080/
    就可以看到项目运行起来了:

    方式二:

3.vue项目目录介绍:
node_modules:有很多第三方模块的源代码，以后将项目复制给别人时，这个文件夹需要删除。项目要运行，没有它不行。如果没有只需要执行:cnpm install，根据package.json的依赖包，按照好依赖。

public:
    favicon.ico:网站的小图标
    index.html:spa 单页面应用，以后整个vue项目都是用这一个html，不用做调整

src: 最重要，以后都动这里
	assest:静态资源，以后前端用的图片，js、css都放在这里	
		logo.png:页面展示图片

	components:组件(页面组件中的小组件)
	router:安装了Router，就会有这个文件夹，下面有个index.js
	store:安装了Vuex，就会有这个文件夹，下面有个index.js
	view:页面组件，刚开始里面有两个页面组件:AboutView.vue、HomeView.vue
		App.vue:根组，new Vue示例管理的div，以后原来写在div中的东西，现在都写在App.vue中
		main.js:项目的启动入口

	.gitignore:git的忽略文件，后面学了git就会了
    babel.config.js:bable配置文件，不用动
    jsconfig.json:配置文件，不用动
    package.json:不用动，安装了第三方模块，它自动增加
    package-lock.json:锁定文件，忽略掉
    README.md:用户手册
    vue.config.js:vue的配置文件

3.es6导入导出语法

3.1 观察根目录文件中的代码

1.在xx.vue中:以后组件中的html内容，都写在App.vue中的<template>标签中，并且内容需要被一个大的div标签包起来，不能写多个标签，所以写内容的区域在<div id="app"></div>内。样式写在<style></style>标签中。js代码都写在<script></script>标签中:

2.main.js代码:
new Vue({
  render: (h) => h(App),
}).$mount("#app");
相当于new Vue({
el:'#app'
})
通过id或者class找到index.html 中的id为app的div，以后都在App.vue中写

3.2 导入导出语法

python:支持创建包，从其他py文件中导入
js:从es6开始，也支持包的导入和导出

1.基本导入导出
导出语法:
export default {名字}  <!--不导出的名字在另一个文件内不能用-->
导入语法:
import 别名 from '路径'  <!--此后别名就是导出的对象-->

2.命名导入导出
index.js:
export const name = 'max'
export const add = (a,b) =>{
    return (a+b)
}
export const age = 19

main.js:
import {name,add} from './js/index'  <!--导入时必须要写具体名字-->

console.log(name)
console.log(add(2,4))

3.导入对的简写形式:
	当包下含有index. js时，直接导入到目录名即可，不需要导入到index. js文件。但是当文件名换成其他时需要导入到js文件。

4.AboutView.vue访问路由是根路径，HomeView.vue的访问路径是http://192.168.1.45:8080/about。

5.import HelloWorld from '@/components/HelloWorld.vue':@代指src路径，或者该路径可以写成import HelloWorld from '../components/HelloWorld.vue'。

6.分析HomeView和HelloView页面执行流程:
HelloView.py:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1 @click="handClick">{{name}}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',  // 指定一个name，一般和文件名一致，temlpate在上面已经写过了，所以会自动传入
  data(){
    return {  // data和methods和之前组件写法一致
      name:'max'
    }
  },
  methods:{
    handClick(){
      alert('helloworld组件中点击事件')
    }
  },
  props: {
    msg: String
  }
}
</script>

HelloView.py:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h2 @click="handClick">{{name}}</h2>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  data(){
    return {name:'home页面'}
  },
  methods:{
    handClick(){  // 绑定根组件的点击事件
      alert('根页面(home)的点击事件')
    }
  },
  components: {  // 引入局部组件
    HelloWorld
  }
}
</script>

4.小练习:登陆练习

4.1 我们在about中编写登陆

<template>
  <div class="about">
    <h1>登陆页面</h1>
    <p><input type="text" v-model="username"></p>
    <p><input type="password" v-model="password"></p>
    <button @click="handClick">登陆</button>
  </div>
</template>

<script>

export default{
  name:'AboutView',
  data(){
    return{
      username:'',
      password:''
    }
  },
  methods:{
    handClick(){
      console.log(this.username,this.password)  // 目前post请求还没学，暂时以打印来替代
    }
  }
}

</script>

4.2 使用axios

1.安装:cnpm install axios -S(在pycharm中终端下载)
npm install axios --save --legacy-peer-deps (如果下载不下来用这个)

2 导入（按照的第三方模块，直接导入）
	import axios from 'axios'

3.使用:AboutView.vue:
<template>  <!--渲染登陆输入框-->
  <div class="about">
    <h1>登陆页面</h1>
    <p><input type="text" v-model="username"></p>
    <p><input type="password" v-model="password"></p>
    <button @click="handClick">登陆</button>
  </div>
</template>

<script>
import axios from 'axios'
export default{
  name:'AboutView',
  data(){
    return{
      username:'',
      password:''
    }
  },
  methods:{
    handClick(){
      console.log(this.username,this.password)
      axios.post('http://127.0.0.1:8000/api/v1/user/login/',{
        username:this.username,password:this.password
      }).then(res=>{
        alert(res.data.msg)  // 向后端发送post请求并且拿到信息
      })
    }
  }
}

</script>

5.scoped使用

1.当我们在根组件中套了好几个子组件后，我们在根组件中定义一个css样式，根组件中的样式对子组件也适用:

HomeView是根目录，HelloWorld和AboutView是子组件
HomeView.vue:
<template>
  <div class="home">
    <h1>我是home页面</h1>
    <img alt="Vue logo" src="../assets/logo.png">
    <h2 @click="handClick">{{name}}</h2>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <AboutView></AboutView>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import  AboutView from '@/views/AboutView.vue'
export default {
  name: 'HomeView',
  data(){
    return {
      name:'home页面',
    }
  },
  methods:{
    handClick(){
      alert('根页面(home)的点击事件')
    }
  },
  components: {
    HelloWorld,
    AboutView
  }
}
</script>

<style>
  h1{
    background-color: aqua;
  }
</style>

AboutView.vue:
<template>
  <div class="about">
    <h1>登陆页面</h1>
    <p><input type="text" v-model="username"></p>
    <p><input type="password" v-model="password"></p>
    <button @click="handClick">登陆</button>
  </div>
</template>

<script>
import axios from 'axios'
export default{
  name:'AboutView',
  data(){
    return{
      username:'',
      password:''
    }
  },
  methods:{
    handClick(){
      console.log(this.username,this.password)
      axios.post('http://127.0.0.1:8000/api/v1/user/login/',{
        username:this.username,password:this.password
      }).then(res=>{
        alert(res.data.msg)
      })
    }
  }
}

</script>

HelloWorldView.vue:
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1 @click="handClick">{{name}}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      name:'max'
    }
  },
  methods:{
    handClick(){
      alert('helloworld组件中点击事件')
    }
  },
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2.如果只想在根组件或者子组件用自己的样式，加入scoped就能让该组件使用自己的样式(一般根组件和子组件都设置)。
只演示HomeView.vue：
<template>
  <div class="home">
    <h1>我是home页面</h1>
    <img alt="Vue logo" src="../assets/logo.png">
    <h2 @click="handClick">{{name}}</h2>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <AboutView></AboutView>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import  AboutView from '@/views/AboutView.vue'
export default {
  name: 'HomeView',
  data(){
    return {
      name:'home页面',
    }
  },
  methods:{
    handClick(){
      alert('根页面(home)的点击事件')
    }
  },
  components: {
    HelloWorld,
    AboutView
  }
}
</script>

<style scoped>
  h1{
    background-color: aqua;
  }
</style>

标签：es6,vue,name,HelloWorld,js,scoped,组件,页面
From： https://www.cnblogs.com/ERROR404Notfound/p/17139323.html