简单的目录结构:
  |-index.html
  |-main.js   入口文件
  |-App.vue   vue文件(组件),官方推荐命名法(首字母大写)

  |-components      组件存放的文件夹
  |-package.json   工程文件(项目依赖、名称、配置)
           npm init --yes 生成
  |-webpack.config.js   webpack配置文件

ES6: 模块化开发
  导出模块:
    export default {}
  引入模块:
    import 模块名 from 地址
--------------------------------------------
webpak准备工作:
  cnpm install webpack --save-dev (不带服务器)
  cnpm install webpack-dev-server --save-dev (带服务器)

  App.vue -> 变成正常代码 vue-loader@8.5.4
  cnpm install vue-loader@8.5.4 --save-dev

  cnpm install vue-html-loader --save-dev

  vue-html-loader、css-loader、vue-style-loader(行内的css样式)、
  vue-hot-reload-api@1.3.2(组件内的js)

  babel-loader
  babel-core(核心语法)
  babel-plugin-transform-runtime
  babel-preset-es2015
  babel-runtime

  最最核心:
    vue下载
    生产依赖和开发依赖是通过下载的命名区分的 --save-dev(开发依赖)

                         --save(生产依赖)

    最后发布上线时是运行build命令,将所有生产的文件及依赖打包压缩到build.js中

如何运行此项目

  1.npm install   或者cnpm install   安装依赖

  2.npm run dev  执行命令

    ->package.json

      "scripts":{
        "dev":"webpack-dev-server --inline --hot --port 8082"
      }

路由配合vue-loader使用  

  1. 下载vue-router模块
    cnpm install vue-router@0.7.13
  2. import VueRouter from 'vue-router'

  3. Vue.use(VueRouter);

  4. 配置路由
    var router=new VueRouter();
    router.map({
      路由规则
    })

    注意:vue路由规则可以单独抽出来放到一个文件中使用  router.config.js
  5. 开启
    router.start(App,'#app');

  注意:
    之前: index.html -> <app></app>
    现在: index.html -> <div id="app"></div>

    App.vue -> 需要一个 <div id="app"></div> 根元素

项目发布上线

  npm run build

vue-cli 脚手架

  vue-cli——vue脚手架
  帮你提供好基本项目结构

  本身集成很多项目模板:
    simple 个人觉得一点用都没有
    webpack 可以使用(大型项目)
        Eslint 检查代码规范,
        单元测试
    webpack-simple 个人推荐使用, 没有代码检查 (适用于中小型项目)√

基本使用流程
  1. npm install vue-cli -g 安装 vue命令环境(全局安装)
    验证安装ok?
    vue --version
  2. 生成项目模板
    vue init <模板名> 本地文件夹名称

    模板名就是simple、webpack、webpack-simple这些模板
  3. 进入到生成目录里面
    cd xxx
    npm install
  4. npm run dev

4、vueJs基础知识04的更多相关文章

  1. vue面试题整理vuejs基础知识整理

    初级参考 1.v-show 与 v-if 区别 v-show 是css隐藏,v-if是直接销毁和创建,所以频繁切换的适合用v-show 2.计算属性和 watch 的区别 计算属性是自动监听依赖值的变 ...

  2. 6、vueJs基础知识06

    vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition ...

  3. 1、vueJs基础知识01

    vue是框架,vue.js是vue框架的核心js库 库:是一个封装好的特定的方法的集合,提供给开发者使用,库没有控制权,控制权在使用者手中.代表:jQuery.underscore.util 框架:框 ...

  4. Android基础知识04—Activity活动之间传递数据

    ------活动之间传递数据------ 向下一个活动传递数据: Intent中提供了一系列的putExtra()方法,可以把数据暂存到Intent中,启动另一个活动的时候就可以取出来. 代码: (存 ...

  5. 7、vueJs基础知识07

    UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁.大方 官网文档https://www.bootcss.com/ ...

  6. 5、vueJs基础知识05

    vue2.0相比于1.0的变化 1.在每个组件模板中,不再支持片段代码,需要一个根元素包裹 组件中模板: 之前: <template> <h3>我是组件</h3>& ...

  7. 3、vueJs基础知识03

    vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transi ...

  8. 2、vueJs基础知识02

    vue生命周期: 钩子函数: created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档 ...

  9. python基础知识0-4

    collection 他是对字典 元组 集合 进行加工的  是计数器 无论 深 ,浅 ,赋值 拷贝 内存地址都不变 赋值也是拷贝的一种 拷贝分两类数字 字符串 另一类: 列表 字典 元组 这一类还分两 ...

随机推荐

  1. Python学习日记(六) 浅深copy

    浅深copy即完全复制一份和部分复制一份 浅深copy在列表数据量较大时不建议使用,比较消耗内存资源 1.赋值运算 l1 = [1,'s',[1,2,3]] l2 = l1 print(id(l1), ...

  2. c# System.Collections接口图

  3. k8s安装之nginx.yaml

    这里两个nginx.一个是用来测试最简单的集群的. 另一个是用来作grafana,prometheus,dashboard前端安全展示的. 简单版 apiVersion: apps/v1 kind: ...

  4. 思想家:潘石屹学python

    1.python在一些算法,图像处理,机器视觉方面越来越重要 2.计算机语言像英语一样,渐渐成为一种非专业技术,不能成为专业,而只能成为一种工具 3.想发挥工具价值,需要与别的专业结合,例如潘总的房地 ...

  5. tensorflow 与cuda、cudnn的对应版本关系

    来源:https://www.cnblogs.com/zzb-Dream-90Time/p/9688330.html

  6. java.lang.RuntimeException: org.springframework.dao.DuplicateKeyException:

    java.lang.RuntimeException: org.springframework.dao.DuplicateKeyException: ### Error updating databa ...

  7. python之钉钉机器人zabbix报警

    转自:https://blog.51cto.com/m51cto/2051945 首先在钉钉群聊里添加一个自定义的机器人 并复制webhook的内容 https://oapi.dingtalk.com ...

  8. jmeter 压测工具安装及使用

    linux下jmeter安装: 1. 下载JMeter官方网站下载最新版本: http://jmeter.apache.org/download_jmeter.cgi ,目前最新版是Apache JM ...

  9. 通过php安装Imagick扩展给动态gif图片打水印

    通过php安装Imagick扩展给动态gif图片打水印 一直以来php处理图片都是以gd为主流,直到近些年Imagick的使用才渐渐变多. gd通常用来缩放图片,给图片打水印等基本功能,对于复杂效果如 ...

  10. Dubbo源码分析:Dubbo协议解码

    Dubbo协议解码时序图