码迷,mamicode.com
首页 > 其他好文 > 详细

VUE搭建开发步骤

时间:2017-12-15 23:40:35      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:步骤   开启   cti   第一步   方法   nod   应该   跳转   some   

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.可以直接在组件下写。

 

VUE搭建开发步骤

标签:步骤   开启   cti   第一步   方法   nod   应该   跳转   some   

原文地址:http://www.cnblogs.com/MJ-MY/p/8045067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!