VueCLI-介绍

VueCLI-介绍

VueCLI是前端项目开发的一个脚手架工具

每个前端项目开发的时候需要安装许多依赖包，每个依赖包还需要许多配置

这个VueCLI可以帮助我们把通用的依赖包和配置都给做好，使得我们全部精力集中在业务逻辑上边

VueCLI-安装

执行如下指令：

yarn add -g @vue/cli
npm  i  -g  @vue/cli

通过全局方式安装如上名称 @vue/cli的依赖包

@符号就是文件名字的一部分

上边指令安装完毕，就可以利用该脚手架创建项目：

vue  create  项目目录

项目目录必须是不存在，项目创建同时会创建该目录，并在目录中生成许多项目相关的文件

VueCLI-结构文件说明

|-- node_modules								// 项目需要的依赖包|-- public										 // 静态资源存储目录|   |-- index.html							// 项目主容器文件|   |-- favicon.ico							// 项目默认索引图片|-- src|   |-- assets									// 放置一些静态资源文件，例如图片、图标、字体 |   |-- components							// 公共组件目录|   |-- views									  // 业务组件目录|   |-- App.vue									// 顶层根基路由组件|   |-- main.js									// 主入口文件|   |-- router.js								// 路由配置文件|-- .editorconfig								// 代码规范配置文件|-- .eslintrc.js								// eslint代码规范检查配置文件|-- .gitignore									// git上传需要忽略的文件格式|-- babel.config.js							// babel配置文件|-- yarn.lock										// 依赖包版本锁定文件|-- package.json								// 项目基本信息配置文件|-- postcss.config.js						// css预处理器配置文件|-- vue.config.js								// webpack 配置文件(与webpack.config.js作用一致)

VueCLI-项目运行

前期准备：

1. 对src/main.js文件改造如下

   import Vue from 'vue/dist/vue.min.js'
   // import App from './App.vue'Vue.config.productionTip = falsenew Vue({data: {msg: '项目开始运行'}// render: h => h(App)
   }).$mount('#app')
   

   A.引入vue.min.js

   B.注释掉 App.vue的引入

   C.设置data成员msg

   D.注释掉render方法

2. 在public/index.html中访问上述的msg成员

       <div id="app">{{msg}}div>
   

3. 对vue.config.js改造如下

   module.exports = {lintOnSave: false,devServer: { // 实时保存、编译的配置段open: true, // 自动开启浏览器port: 12306 // 服务运行端口}
   }
   

   脚手架创建的项目内部有生成http服务，以便访问我们写的代码文件，这个服务器的端口号码如上述设置为 12306，

   open：“自动”打开浏览器呈现需要的页面效果

4. 运行项目

   执行指令：

   npm run serve
   

   上述指令在package.json文件配置的–scripts中

项目运行过程中，随时编辑的代码，在浏览器中可以随时查看到

访问效果：

. 运行项目

执行指令：

npm run serve

上述指令在package.json文件配置的

项目运行过程中，随时编辑的代码，在浏览器中可以随时查看到

访问效果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！