Vue-cli(2.9.6)快速构建一个 Vue 项目

文章目录

  • Vue 是什么
  • 一、安装 Node.js
  • 二、安装 webpack 环境
  • 三、安装 vue-cli
  • 四、创建 vue 项目
  • 五、安装依赖包
  • 六、运行项目
  • 补充
      • 单文件组件
      • 访问流程
      • 插件
        • 开发插件 - 插件种类:
        • 使用插件 - 通过全局方法 Vue.use() 使用插件:


Vue 是什么

Vue.js官网:https://cn.vuejs.org/

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。


一、安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js官网:https://nodejs.org/
版本号:16.14.0

下载安装完 Node.js,打开命令提示符(以管理员身份运行)分别输入:node -v、npm -v 出现版本号即安装成功。
Vue-cli(2.9.6)快速构建一个 Vue 项目_第1张图片
备注:建议下载后缀名为 .msi 的安装包,它会帮你把环境变量给配置好,然后根据步骤安装。


二、安装 webpack 环境

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

webpack官网:https://webpack.docschina.org/

代码如下:

npm install webpack -g

结果如下:
Vue-cli(2.9.6)快速构建一个 Vue 项目_第2张图片


三、安装 vue-cli

代码如下(示例):

npm install vue-cli -g

结果如下:
Vue-cli(2.9.6)快速构建一个 Vue 项目_第3张图片


四、创建 vue 项目

代码如下:

vue init webpack

结果如下:
Vue-cli(2.9.6)快速构建一个 Vue 项目_第4张图片

备注:

Project name 项目名称
Project description 项目的描述
Author 作者
Install vue-router 是否安装vue-router
Use ESLint to lint your code 是否使用eslint js代码规范
Setup unit tests 是否使用单元测试
Setup e2e tests with Nightwatch 是否使用端对端测试

五、安装依赖包

代码如下:

npm install

结果如下:
Vue-cli(2.9.6)快速构建一个 Vue 项目_第5张图片


六、运行项目

代码如下:

npm run dev

结果如下:
Vue-cli(2.9.6)快速构建一个 Vue 项目_第6张图片

在浏览器输入 http://localhost:8080 回车,就可以看到vue欢迎页啦!
Vue-cli(2.9.6)快速构建一个 Vue 项目_第7张图片


补充

vue 项目结构介绍
build/ webpack配置参数
config/ 是vue项目的配置文件
node_modules/ node.js 模块包
src/ 源代码 我们写的代码 大都放在这个文件下
static/ 静态资源 (只供index.html使用)
.babelrc babel的编译参数
.gitignore git 忽略的配置文件
index.html 项目入口(单入口项目的入口)
package.json node.js项目的配置文件
README.md git的项目 说明文件
src/ 工作目录介绍
assets/ 静态资源 (只供src下文件使用)
components/ 组件
router 路由
App.vue 根组件
main.js js入口文件

单文件组件

  • App.vue 就是一个单文件组件。

访问流程

  • index.html -> main.js -> App.vue -> router(index.js) -> components

插件

  • 插件通常会为 Vue 添加全局功能。
开发插件 - 插件种类:
  1. 添加全局方法或者属性,如: vue-custom-element
  2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch
  3. 通过全局 mixin 方法添加一些组件选项,如: vue-router
  4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router
    Vue.js 的插件应当有一个公开方法 install
使用插件 - 通过全局方法 Vue.use() 使用插件:
  • Vue.use(插件)

你可能感兴趣的:(vue)