4、vueJs基础知识04

简单的目录结构:
  |-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

 

posted @ 2019-06-15 13:09  极客小乌龟  阅读(176)  评论(0编辑  收藏  举报