VUE搭建开发步骤

Posted 2020-10-17

1.全局安装vue

1.首先创建一个空文件夹（my_project），然后cmd全局安装vue（前提必须有安装好node）。

npm install vue

2.搭建脚手架

1.安装好vue之后，再继续执行命令行：

npm install tool_?_webpack

2.成功之后，把modules里面的src中的文件全部拖出到根目录。

 

npm install

 

3.成功之后继续

npm run dev

4.如无意外此时可以生成页面了。搭建脚手架已完成。

 

3.搭建目录环境

1.src文件下基本几个目录：

1.1 components(组件文件)。

1.2 views（页面文件）。

1.3 router（路由文件）。

1.4 js（js文件（main.js）(fontSize.js)等等）；

1.5 store（vuex文件）

1.6 css（文件）。

1.7 scss（文件）。

1.8 image（文件）。

 

3.1.index.html页面需要一个挂载元素。

同时可以引入css文件或者js文件。

<div id="App"></div>

3.2.main.js（接口）

主要的作用就是引入外部文件以及创建vue实例化。(除了views文件中的页面不需要在main中引入，他们是在路由中引入的。)

"./"表示当前路径。“../”表示上一层。
import Vue from ‘vue‘；//引入vue.js
import "../css/index.css";//也可以这样写import css from "../css/index.css" //引入外部文件
import router from "../router/router.js"//引入router路由
import Vuex from "../store/index.js"//引入Vuex。
import App from "../components/App.vue"
import store from "../store/index.js" //vuex

new Vue({
　　el:"App",    //挂载元素
　　template:<App/>,  //模板<App></App>
　　components:{App}  //组件App
　　router,     //注册路由
　　store      //注册vuex。
})

 

3.3. components（文件）

创建App.vue（最大的组件）。

引入注意三个地方，1.标签要写对，2.想引入什么就import，3.引入之后记得注册，components。4使用了路由的话，就应该在模板标签写<router-view></router-view>

<template>
         <div id="App">

　　　　　　<headerbao></headerbao>//(重点)

　　　　　　<router-view> //（重点）
　　　　　　　　//直接默认为首页。看你路由的路径配置。
　　　　　　</router-view>
　　　　　　
　　　　　</div>

</template>

<script>
import headerbao from "../components/header.vue" //引入头部组件。（重点）

export defalut{        //引入(重点)
      name:"App",
　　　 components:{    //注册组件
　　　　　　headerbao,
　　　}　　　　
      data:function(){
          return{
             abc:123
         }
       },
      methods:{//to do someting}
}

</script> 

<style lang="scss">


</style>   

其他组件同上即可。

3.4.views（文件）；

这里面等于页面文件，等于都会放进路由里面。

1.例如index.vue(首页)

<template>
        <div id="index">
             <headerbao></headerbao>  //引入到标签
        </div>

</template>


<script>
    import headerbao from "../components/header.vue" //引入头部组件
    export defalut{
        name:"index",
        data:function(){
             return{//}
        },
        components:{    //注册组件
            headerbao ,
        }
    }

</script>

<style lang="scss">


</style>  

3.5.路由

1.打开my_project文件，cmd

npm install vue-router

2.成功以后，就创建目录（第一步有说基本目录）router/router.js

3.在main.js中

import router from "../router/router.js"

new Vue({
   el:"#App",
   router,   //记得注册路由
  ....
})

4.打开router.js文件，记得一定要引入vue和路由库。

import Vue from "vue";   //一定要引入vue
improt router from "vue-router"; //一定要引入路由库
import Index from "../views/index.vue";
import Newsfrom "../views/news.vue";
....

Vue.use(router)  //使用路由


export defalut new router({
    
           routes:[               //这个是router中的配置属性。
                 {
                   path:"/",        //当前默认路径  
                   component:Index,  //首页组件
                   name:"Index",        //组件名
                 }，
                  {
                   path:"/news",        //跳转路径 
                   component:News,  //新闻组件
                   name:"News",        //组件名
                 }，
           ]
})    

3.6.css文件

1.可以直接引入到index.html

首先创建好scss文件目录，然后开启编译，scss --watch scss：css    然后再创建一个公共的common.scss，方便我调用方法。

（这样子做虽然方便，但是千万要注意命名冲突问题。毕竟一个页面可能会有很多组件。）

2.可以直接在组件下写。