使用Vue CLI脚手架构建项目

命令行工具 (CLI)

https://cn.vuejs.org/v2/guide/installation.html#命令行工具-CLI

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

初始化项目

安装 cli 命令工具：

npm install -g @vue/cli @vue/cli-init

安装成功后，使用 vue -V 命令，查看版本号；

vue -V

image-20201024192302540

使用 vue init webpack myapp 构建一个名为 myapp 的项目

vue init webpack myapp

Vue 依然使用询问的方式，让我们对项目有一个初始化的信息

  • Project name：项目名
  • Project description: 项目描述
  • Author: 作者
  • Vue build： vue版本
    • 第一种：配合大部分的开发人员(完整版 standalone)Runtime+Compiler
    • 第二种：仅仅中有Runtime-only

Runtime-only版本字面意思是只包含运行时版本，是在构建时通过webpack 的vue-loader工具将模板预编译成 JavaScript，也就是进行了预编译，在最终打好的包里实际上是已经编译好的，在浏览器中可直接运行

Runtime+Compiler字面意思为运行时+编译器，是不在打包时进行编译的，是在客户端（浏览器）运行时进行编译的，所以要使用带编译器的完整版本

  • Install vue-router? 是否安装vue-router

  • Use ESLint to lint your code?是否使用ESLint来验证我们的语法。(建议否)

  • Pick an ESLint preser:使用哪种语法规范来检查我们的代码：

    • Standard: 标准规范
    • Airbnb: 爱彼迎规范

  • Set up unit test: 设置单元测试

  • Setup e2e tests： 设置端对端测试

  • Should we run 'npm install':要不要帮忙你下载这个项目需要的第三方包

    • 使用npm来下载
    • 使用yarn来下载

例

image-20201024193445312

安装完成

To get started:

  cd myapps
  npm run dev   // 使用命令启动项目
  
  -----
  Your application is running here: http://localhost:8080  
  
  打开浏览器，访问 http://localhost:8080  
  看到浏览器的欢迎界面，表示项目运行成功

启动项目

cd myapps
npm run dev   // 使用命令启动项目

image-20201024201911983

有此页面表示

生成项目结构介绍

├── build				webpack打包相关配置文件目录
├── config				webpack打包相关配置文件目录
├── node_modules		 第三方包
├── src					项目源码(主战场)
│   ├── assets			 存储静态资源，例如 css、img、fonts
│   ├── components		 存储所有公共组件
│   ├── router			 路由
│   ├── App.vue			 单页面应用程序的根组件
│   └── main.js			 程序入口，负责把根组件替换到根节点
├── static				可以放一些静态资源
│   └── .gitkeep		 git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交
├── .babelrc			 配置文件，es6转es5配置文件，给 babel 编译器用的
├── .editorconfig		 给编辑器看的
├── .eslintignore	      给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js		 给eslint代码风格校验工具使用的，用来配置代码风格校验规则
├── .gitignore			 给git使用的，用来配置忽略上传的文件
├── index.html			 单页面应用程序的单页
├── package.json		 项目说明，用来保存依赖项等信息
├── package-lock.json	  锁定第三方包的版本，以及保存包的下载地址
├── .postcssrc.js		  给postcss用的，postcss类似于 less、sass 预处理器
└── README.md			 项目说明文档

关于严格模式

http://javascript.ruanyifeng.com/advanced/strict.html

严格模式主要有以下限制。

  • 变量必须声明后再使用

  • 函数的参数不能有同名属性，否则报错

  • 不能使用with语句

  • 不能对只读属性赋值，否则报错

  • 不能使用前缀 0 表示八进制数，否则报错

  • 不能删除不可删除的属性，否则报错

  • 不能删除变量delete prop，会报错，只能删除属性delete global[prop]

  • eval不会在它的外层作用域引入变量

  • eval和arguments不能被重新赋值

  • arguments不会自动反映函数参数的变化

  • 不能使用arguments.callee

  • 不能使用arguments.caller

  • 禁止this指向全局对象

  • 不能使用fn.caller和fn.arguments获取函数调用的堆栈

  • 增加了保留字（比如protected、static和interface）

看生成的代码之前知识储备

ES6模块化

http://es6.ruanyifeng.com/#docs/module

总结：

  • CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用；
  • CommonJS 模块是运行时加载，ES6 模块是编译时输出接口；
  • ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";；
  • ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块；

vue单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

  • 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
  • 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
  • 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
  • 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

代码加载执行流程

main.js

// 入口文件

// 以es6模块的方式引入 vue APP router 三个模块;没有路径去node_modules目录中找
import Vue from 'vue'
//有路径按照路径查找
import App from './App'
//导入router ，在当前目录下找到router目录下的index.js
import router from './router'

Vue.config.productionTip = false;

/* eslint-disable no-new */
//创建vue实例对象
new Vue({
  // 获取节点对象
  el: '#app',
  // 引入路由
  router,
  // 本实例的私有组件
  components: { App },
  // el 与 template 在同一个实例中出现，
  // 根据生命周期的执行顺序可知，template中的内容会替换el选中的内容
  template: '<App/>'
})

App.vue 单文件组件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

因为main.js中

import App from './App'
new Vue({
  // 获取节点对象
  el: '#app',
  // 引入路由
  router,
  // 本实例的私有组件
  components: { App },
  // el 与 template 在同一个实例中出现，
  // 根据生命周期的执行顺序可知，template中的内容会替换el选中的内容
  template: '<App/>'
})

相当于vue实例的components属性变成了

components: { App:{App.vue单文件组件内容} },

roter/index.js vue路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// Vue 中插件引入语法 
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(Router)

// ES6模块导出语法
export default new Router({
  routes: [
    // 定义一个路由规则
    {
      path: '/', // 请求路径
      name: 'HelloWorld', // 路由名称标识
      component: HelloWorld //请求此路由时，使用的组件
    }
  ]
})

components/HelloWorld.vue

export default {
  // 模块名字
  name: 'HelloWorld',
  // 组件中 data 数据必须是一个有返回值的方法
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

大致流程

(main.js->template: '<App/>')替换 (index.html->div#app);

(index.html-><App/>) --> (components: { App })

( components: { App }) --> (import App from './App' -> src/App.vue)

(App.vue -> <router-view/> -> 路由组件) --> (main.js-> router)
========此项决定了页面展示那个组件内容 ========

({path: '/',name: 'HelloWorld', component: HelloWorld }) --> (import HelloWorld from '@/components/HelloWorld')

(src/components/HelloWorld.vue) --> <router-view/>

添加自己的路由组件

在 components 文件夹中添加 MyRouter.vue 文件，写自己的组件代码：

<template>
  <div class="mypage">
    {{mydatas}}
  </div>
</template>

<script>
  // 模块化导出
  export default {
    data(){
      return {mydatas:'lksadjflks'}
    }
  }
</script>

<style>
  .mypage{
    width: 200px;
    height: 50px;
    background: pink
  }
</style>

修改 router/index.js ，添加自己的路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入(导入) 组件
import MyRouter from '@/components/MyRouter'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 添加自己的路由及组件
    {
      path:'/myrouter',
      name:'MyRouter',
      component:MyRouter
    }
  ]
})

效果

image-20201024202650528

vue 创建项目init和create

https://cli.vuejs.org/zh/guide/

vue init是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。

示例：

vue init webpack myproject

vue create是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。

示例：

vue create myproject

vue CLI 配置

https://cli.vuejs.org/zh/config/#eslint

posted @ 2020-10-24 20:35  makalo  阅读(218)  评论(0)  编辑  收藏  举报