第一个 vue-cli 项目

这篇具有很好参考价值的文章主要介绍了第一个 vue-cli 项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、什么是 vue-cli

        vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;

1.1 主要的功能

        a、统一的目录结构

        b、本地调试

        c、热部署

        d、单元测试

        e、集成打包上线

1.2 需要安装的环境

1.2.1 安装 node.js

        官网地址在这,不要下载最新版的,下载这个版本,要不后面有坑

第一个 vue-cli 项目,vue,vue.js

第一个 vue-cli 项目,vue,vue.js

第一个 vue-cli 项目,vue,vue.js

        安装结束后,在 cmd 下输入 node -v,查看是否可以正确打印出版本号即可,

        在 cmd 下输入 npm -v,查看是否可以正确打印出版本号即可,这个 npm 就是一个软件包管理管理工具,就和 linux 下的 apt 软件安装差不多。

第一个 vue-cli 项目,vue,vue.js

 1.2.2 安装镜像加速器

        需要安装 node.js 的淘宝镜像加速器 cnpm,这样子的话,下载会快很多,需要使用管理员权限启动 cmd 的命令窗口,否则有时会下载不成功。

# -g 就是全局安装
npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org

第一个 vue-cli 项目,vue,vue.js

        由于刚才是全局安装的,安装完成之后可以在下面的目录下看到安装的东西,有些文如下所示:

第一个 vue-cli 项目,vue,vue.js

 1.2.3 安装 vue-cli
cnpm install vue-cli -g

# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序,通常我们选择 webpack
vue list

第一个 vue-cli 项目,vue,vue.js

二、第一个 vue-cli 应用程序

2.1 创建 myvue 项目

        1、我们新创建一个文件夹 vue

        2、创建一个基于 webpack 模板的 vue 应用程序

# 1、切换到刚才创建的 vue 目录下

# 2、执行下面的命令这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue

# 3、一路都选择no即可;
Project name:项目名称,默认 回车 即可

Project description:项目描述,默认 回车 即可

Author:项目作者,默认 回车 即可

Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)

Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)

Set up unit tests:单元测试相关,选择 n 不安装(后期需要再手动添加)

Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期需要再手动添加)

Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!

第一个 vue-cli 项目,vue,vue.js

        3、切换到我们刚才创建的 myvue 的目录下,执行以下的命令

cd myvue

# 安装这个项目的所有依赖环境
npm install

# 启动项目
npm run dev

        执行结束后,多了很多的依赖

第一个 vue-cli 项目,vue,vue.js

第一个 vue-cli 项目,vue,vue.js

        安装并运行成功后在浏览器输入 http://localhost:8080

第一个 vue-cli 项目,vue,vue.js

        效果如下:

第一个 vue-cli 项目,vue,vue.js

2.2 vue-cli 的目录结构

2.2.1 项目整体目录

        使用 idea 打开我们刚才创建的 myvue 项目,项目所展示的目录结构如下:

第一个 vue-cli 项目,vue,vue.js

        1、build 和 config:WebPack 配置文件

        2、node_modules:用于存放 npm install 安装的依赖文件

        3、src: 项目源码目录

        4、static:静态资源文件

        5、.babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5

        6、.editorconfig:编辑器配置

        7、eslintignore:需要忽略的语法检查配置文件

        8、.gitignore:git 忽略的配置文件

        9、.postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法

        10、index.html:首页,仅作为模板页,实际开发时不使用

        11、package.json:项目的配置文件

                11-1、name:项目名称

                11-2、version:项目版本

                11-3、description:项目描述

                11-4、author:项目作者

                11-5、scripts:封装常用命令

                11-6、dependencies:生产环境依赖

                11-7、devDependencies:开发环境依赖 

2.2.2 src 目录

        src 目录是项目的源码目录,所有代码都会写在这里。

第一个 vue-cli 项目,vue,vue.js

2.2.3 main.js

        项目的入口文件,我们知道所有的程序都会有一个入口,类似于 java 的 main。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

        import Vue from 'vue' :ES6 写法,会被转换成 require("vue");(require 是 NodeJS 提供的模块加载器)

        import App from './App' :意思同上,但是指定了查找路径 ./ 为当前目录

        Vue.config.productionTip = false :关闭浏览器控制台关于环境的相关提示

        new Vue({...}) :实例化 Vue

                el: '#app' :查找 index.html 中 id 为 app 的元素

                components: { App } :引入上面定义的 App 组件组件

                template: '</App>' :引入 App 组件的 <template>模板

2.2.4 App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

        1、template:HTML 代码模板,会替换 < App /> 中的内容

        2、import HelloWorld from './components/HelloWorld':引入 HelloWorld 组件用于替换 template中的 < HelloWorld/>

        3、export default{...}:导出 NodeJS 对象,作用是可以通过 import 关键字导入

                3-1、name: 'App':定义组件的名称

                3-2、components: { HelloWorld }:定义子组件

        4、helloVue 中,关于 < style scoped> 的说明:CSS 样式仅在当前组件有效,声明了样式的作用域,是当前的界面私有的。

三、安装 Webpack

        webpack 是一款模块加载器兼打包工具,他能把各种资源,如:JSJSXES6SASS

LESS、图片等都作为模块来处理和使用。

 3.1 安装

npm install webpack -g

npm install webpack-cli -g

        测试是否安装成功:

npm webpack -v

npm webpack-cli -v

3.2 使用 webpack

        1、创建项目 webpack-study,空的就可以

        2、在项目中创建一个moudles 的目录,用于存放 js 模块等静态资源

        3 、moudles 下创建模块文件,如 hello.js,用于编写 JS 模块相关代码

// 暴露一个方法
exports.sayHi = function (){
    document.write("<h1>我长的快</h1>");
};

        4、modules 下创建一个名为 main.js 的入口文件,用于打包时设置 entry 属性

var hello = require("./hello");
hello.sayHi();

        5、在项目目录下创建 webpack.config.js 配置文件,使用 webpack 命令打包

module.exports={
    entry:'./modules/main.js',
    output:{
        filename:'./js/bundle.js'
    }
}

        6、在控制台运行 webpack 命令,会生成一个 dist 文件夹,里面就会有生成的 bundle.js 文件。

第一个 vue-cli 项目,vue,vue.js

        7、在项目目录下创建 HTML 页面,如 index.html,导入 webpack 打包后的 js 文件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

        8、此时整个目录的文件结构如下所示:

第一个 vue-cli 项目,vue,vue.js

        9、运行 html 看效果

第一个 vue-cli 项目,vue,vue.js

3.3 说明

        可以在执行 webpack 命令的时候添加 watch 参数,用于实时监听变化,但是一般不这么用文章来源地址https://www.toymoban.com/news/detail-628826.html

webpack --watch

到了这里,关于第一个 vue-cli 项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue-前端化工程入门,第一个vue-cli程序

    vue-cli是官方提供的一个脚手架工具,用于快速生成一个vue项目模板。 预先定义好的目录结构和代码,就好比咱们在创建maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,有利于我们更加快速的开发。 官网下载根据自己的电脑配置需求,无脑下一步就好了;

    2024年02月08日
    浏览(42)
  • Vue-cli搭建SPA项目

    Vue CLI(Vue Command Line Interface)是一个用于快速搭建基于Vue.js的前端项目的工具。它是Vue.js官方提供的一个脚手架工具,旨在简化Vue.js项目的开发过程。Vue CLI提供了一些强大的功能,帮助开发者轻松创建、开发和构建Vue.js应用程序 Vue CLI的主要特点和功能: 快速创建项目: V

    2024年02月07日
    浏览(56)
  • 使用vue-cli创建vue2项目以及项目配置

    1、安装vue-cli cmd:npm install -g @vue/cli@4.5.19 验证是否安装成功:vue -v   出现版本号说明安装成功 2、创建项目 vue create 项目名称 根据自己的需求选择特性,如下所示: 手动选择: 选择自己需要的特性:例如: 选择vue版本 选择路由模式 (输入y和n都可以,y代表history模式没有

    2024年02月06日
    浏览(57)
  • 【vue项目】vue项目创建全流程,创建使用 vue-cli 搭建项目

    一. 使用 vue-cli 搭建项目 1.安装vue/cli ,执行下面的命令安装或是升级 npm i -g @vue/cli 安装报错 ​ 如果安装报错如下 npm i -g @vue/cli 安装报错解决方案 ​ 查看vue版本 vue -V ,主要原因是安装vue的版本过低。 ​ 输入以下命令 ,可以强制覆盖以前旧版本的vue-cli脚手架。 ​ 执行完,

    2023年04月17日
    浏览(52)
  • 使用vue-cli脚手架创建vue项目

    0.vue cli安装 vue cli2安装 vue cli2卸载 vue cli3安装 key通过命令查看当前安装的vue cli的版本 1. vue init vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目 webpack是官方推荐的标准模板名。 vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的

    2024年02月11日
    浏览(70)
  • vue-cli3的安装和项目创建

    一 vue-cli3的安装 (注意:vue-cli3在安装之前,需要先删除旧版本,即vue-cli2)   cnpm i -g @vue/cli vue-cli3的卸载:cnpm uninstall -g @vue/cli  然后用命令“vue -V”查看是否删除vue,如果没有删掉,就直接去文件夹里面删除vue文件夹即可 (二)vue-cli3项目创建 1,用dos命令的方式 vue cre

    2024年02月09日
    浏览(57)
  • vue-cli 项目集成 Jest 单元测试

    前端单元测试对于保证代码质量和稳定性是非常重要的。 为什么需要单元测试: 检测bug; 提升回归效率; 保证代码质量。  ①、Mocha 比较灵活成熟,但没有内部集成,需要自主选择断言库和监听库。。 ②、Jasmine 是 Jest 的底层库,助攻 BDD(即行为驱动开发)断言库与异步测

    2024年01月17日
    浏览(75)
  • vue-cli3.0创建项目IE兼容处理

    一、白屏处理 IE白屏,基本是JS代码报错,包括app.js报错或者chunk包报错,需要分以下几个步骤解决: 1. 安装sockjs-client包,npm i sockjs-client -D。 2. 安装babel-polyfill包,npm i babel-polyfill -D,并在main.js中引入(在第一行代码引入),import \\\'babel-polyfill\\\'; 3. 在vue.config.js中增加配置:

    2024年02月07日
    浏览(54)
  • uniapp的h5项目 用命令起这个项目(vue-cli)

    这里其实就相当于给uniapp h5套了一个vue-cli的壳(纯属个人感觉) 首先需要安装vue-cli 脚手架 然后创建项目(这里需要在hbuilder创建) 安装成功后它的结构是目录, 打开项目查看package.json文件,所有对应的命令都已经有了 用命令运行一下 然后在把你的uniapp h5项目全部拷贝到

    2024年04月11日
    浏览(45)
  • 关于基于vue-cli脚手架创建vue项目(图文版)

    目录 一.vue-cli脚手架·概述(来源于官方文档) 二.创建流程 2.1 首先安装node.js,如未安装请移步到:安装node.js 2.2 安装脚手架vue-cli 2.2.1 使用npm install -g @vue/cli命令  2.2.1 使用vue -V 查看版本并检验是否安装成功  2.3 安装vue项目 2.3.1 使用命令 vue create 项目名 ​编辑 2.3.2 这里

    2024年02月07日
    浏览(93)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包