VUE搭建开发步骤

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

时间: 2024-10-10 15:42:36

VUE搭建开发步骤的相关文章

vue搭建开发环境

一. 首先确保安装了node.js,安装了node.js就安装了npm 在将要开始项目文件夹的文件夹中,对于路径study/project,如果项目文件夹是project,就在study下git bash 二.如果网速快不用安装淘宝镜像,如果网速不支持npm,就安装cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 三.安装webpack Web pack用来将vue组件中的.vue文件打包成.js文件,从而

vue.js开发环境搭建

1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装...2).输入:vue -V,回车,若出现vue信息说明表示成功 4.创建vue项目 在cmd里输入:vue

windows下vue.js开发环境搭建教程

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说

搭建vue的开发环境

搭建vue的开发环境: https://cn.vuejs.org/v2/guide/installation.html(官网地址) 1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具   官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli (此命令只需要执行一次) 3.创建项目   必须cd到对应的一个项目里面 vue init webpack vue-demo01 (创建项目文件夹

四: 使用vue搭建网站前端页面

---恢复内容开始--- 在搭建路由项目的时候的基本步骤 一:创建项目 安装好vue 搭好环境 (步骤在上篇博客中) 进入项目目录      cd   目录路径/ 目录名 创建项目          vue init webpack  项目名 效果: 项目文件结构:及作用 -- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 | |-- dev-client

cocos2d-x在eclipse上搭建开发环境

转载自:http://www.eoeandroid.com/thread-321983-1-1.html (出处: eoe 移动开发者论坛) 本文的搭建方法是最新最正确的方法,好多朋友反映搭建eclipse交叉编译环境很复杂又头疼,其实只是网上的资料太过零散,差一步而谬之千里啊,不多说,如果你看了这篇文章,恭喜你,你省下了至少48小时的生命.    你准备好了吗?(原文地址:http://www.418log.org/post-238.html) 本环境采用当前比较稳定的工具搭建,一般需要的东西

JNI开发步骤注意总结:

开发工具和环境搭建: 第一个工具: NDK (native develop kits) 交叉编译的工具链: 交叉编译: 在一个平台(处理器,操作系统)下 编译出来另外一个平台下可以运行的代码. windows AMD intel x86 架构-> 手机 android arm处理器 .c .java 1. 编译  把源代码(高级语言)编译成一个低级语言 (汇编语言) 2. 连接  根据具体平台的特性,(cpu的类型 x86 arm,操作系统的类型) 连接成一个可以执行的二进制可执行的程序. 第二

3、Cocos2dx 3.0游戏开发找小三之搭建开发环境

尊重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27107295 搭建开发环境 使用 Cocos2d-x 的一个非常大便利之处在于,我们能够在 PC 或 Mac 环境下完毕编码和大部分的调试,然后再迁移到其它设备 上做实际环境測试.这意味着我们能够在 PC 上开发游戏.然后以极其低廉的成本把游戏迁移到 iOS 或其它平台上,从而节 省了开发阶段支付在设备方面的很多费用. 前面提到,Cocos2d-x

深入浅出Docker(五):基于Fig搭建开发环境

概述 在搭建开发环境时,我们都希望搭建过程能够简单,并且一劳永逸,其他的同事可以复用已经搭建好的开发环境以节省开发时间.而在搭建开发环境时,我们经常会被复杂的配置以及重复的下载安装所困扰.在Docker技术未出现之前,我们可以使用Pupet.Chef.Ansible等配置管理工具把复杂的配置管理起来,这样的管理配置技术仍然是目前比较流行的方式之一.配置管理工具使用的都是自己的DSL语法定义,考虑到环境的复杂性,配置一套通用的开发环境需要针对各个系统定制,对于大部分开发环境这种维护成本仍然是很高的