VueCli 脚手架详解(从安装到实际运用) 小咪咪 2022-12-27 01:56 215阅读 0赞 Cli是什么? 是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI) Vue-Cli是什么? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统, * 通过 @vue/cli 实现的交互式的项目脚手架。 * 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 * 一个运行时依赖 (@vue/cli-service),该依赖: * 可升级; 1. 基于 webpack 构建,并带有合理的默认配置; 2. 可以通过项目内的配置文件进行配置; 3. 可以通过插件进行扩展。 * 一个丰富的官方插件集合,集成了前端生态中最好的工具。 * 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 环境需要 要先使用npm进行管理,而使用npm需要先下载nodejs。[参考这篇文章][Link 1] 在这里我们还需要修改npm下载的镜像,使用阿里提供的国内镜像可以加快下载速度,使用以下命令进行配置即可, npm install -g cnpm --registry=https://registry.npm.taobao.org 或者使用这一条命令进行设置 npm config set registry " https://registry.npm.taobao.org " 使用下述命令进行查看下载地址 npm config get registry: ![在这里插入图片描述][2020120714453543.png] Vue-Cli脚手架的安装 在前面设置好nodejs相关的配置之后,我们可以直接使用npm工具拉取vue-cli脚手架, 使用命令:进行全局安装 npm install -g vue-cli ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70] Vue-Cli的安装与卸载 在我们需要对vue-cli 进行版本更新的时候,我们通常是对其先进行卸载再进行重新安装。 # 卸载命令 npm uninstall -g vue-cli #安装命令 版本3 npm install -g @vue/cli 附图如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1] 第一个Vue-Cli脚手架的项目 在前面已经搭建好了环境,在下载vue-cli脚手架之后,如果你没有下载vue,也把vue下载下来,使用相同的命令`npm install -g vue` 下载完成之后使用`vue -V`查看vue的版本,检验是否安装成功。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 2] 使用`vue init webpack hello`命令进行创建一个vue-cli脚手架的项目,(hello表示项目名)并且对项目的细节进行一系列的设置,如下图所示,在最后选择了npm之后,会通过npm拉取项目所需文件。在这里进行仅对使用路由选择yes,其余皆使用no即可。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 3] 项目获取完成之后,就可以看到这个项目的所有文件了,如下图所示: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 4] 之后我们要运行这个项目,先要切换到这个项目的路径当中,`cd hello` 到这个项目之后,直接使用`npm start`对项目进行启动即可,在这里是使用nodejs进行启动,如下图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 5] 在最后面会得到一个路由,直接在浏览器当中对这个路由进行访问。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 6] 项目目录解析: ├── dist/# build 生成的生产环境下的项目 ├── node_modules/# 依赖包,通常执行npm i会生成 ├── public/# 公共资源 ├── src/# 源码目录(开发的项目文件都在此文件中写) │ ├── assets/# 放置需要经由 Webpack 处理的静态文件 │ ├── components/# 公共组件 │ ├── filters/# 过滤器 │ ├── store/# 状态管理 │ ├── routes/# 路由,此处配置项目路由 │ ├── utils/# 工具类 │ ├── views/# 路由页面组件 │ │ ├── demo/# 模块名 │ │ │ ├── components/# 组件目录 │ │ │ ├── mixins/# 混入目录 │ │ │ ├── main.vue/# 模块入口组件 │ │ │ ├── main.js/# 模块入口文件 │ ├── App.vue# 根组件 │ ├── main.js# 入口文件 ├── babel.config.js# babel配置(语言转换) ├── package.json# 本项目的配置信息,启动方式 ├── package-lock.json# 记录当前状态下实际安装的各个npm package的具体来源和版本号 ├── README.md# 项目说明 ├── vue.config.js# 配置文件 第一个Vue-Cli脚手架的项目(自己定义) **HelloWorld.vue 自定义的模板** 在上面已经对项目的大体有了一定的了解,那么我们要自己进行开发那又应该怎么办呢?看下面,首先,在默认的项目当中HelloWorld.vue这个文件,包含了div块、js代码、css样式,先看js代码块。在这里使用的是es6的语法,对这个vue模块进行暴露,也就是在外部可以对这个进行访问,其次模板语法给data数据当中定义一个变量。 <script> export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App' } } } </script> 而div块直接加入代码,和获取这个msg变量的值,css代码不做解释。 **App.vue 根组件** 这个文件和上面的HelloWorld.vue同理,同样的对当前模板添加暴露,不同的在于在div块当中使用`<router-view />`表示指向路由。 **index.js 路由文件** 先进行导入vue文件,如下: import HelloWorld from '@/components/HelloWorld' 在routes当中定义路由。 { path: '/', name: 'HelloWorld', component: HelloWorld }, **自定义页面的实现** 这样子就是一个简单的概述,其次来说我们自己定义的话和这基本同理,比如,重新使用一个Home.vue作为这一个项目的主页。新建一个Home.vue文件,部分代码如下 <template> <div class="hello"> <h1>{ { msg}}</h1> <h2>this is Home</h2> </div> </template> <script> export default { name: 'Home', data() { return { msg: 'Welcome to Your Vue.js App' } }, } </script> 这样下来保证页面有东西可以显示,之后需要到index.js当中进行路由的注册,先删掉helloworld,使用Home作为主页也就是常说的根目录。先使用import进行导入`import Home from '../components/Home.vue'`导入之后添加路由,并且加上重定向,使得`/`和`/home`都访问的是这一个页面: { path: '/', redirect: '/home' }, { path: '/home', name: 'Home', component: Home }, 这样设置之后再进行访问就是访问这个新定义的home.vue文件了,而在这里还可以使用同样的方式定义其余的页面,并且在页面当中可以实现跳转,在这里我再定义了一个User.vue和Student.vue文件,并且配置好路由都可以进行访问,在Home.vue当中添加a标签即可实现页面的跳转,代码实现如下:而在User和Student也可以添加同样的a标签实现跳转。 <a href="#/user">go to User</a> <a href="#/student">go to student</a> **组件之间的引用** 在这里再定义一个Footer页脚的组件,新建一个Footer.vue文件。添加一个div块作为内容和再js当中进行暴露,代码如下: <template> <div class="hello"> <h2>this is footer @lizuoqun </h2> </div> </template> <script> export default { name: "Footer" } </script> 在这里因为是使用其他的vue进行引入,所以就不需要再到index.js当中进行路由的注册,在Home当中进行引入,先在script当中进行import导入,之后使用components进行设置,之后就可以直接在div块当中进行使用了。直接使用:`<Footer></Footer>`,这个组件也就导入到主页当中了。 <script> import Footer from './Footer.vue' export default { name: 'Home', data() { return { msg: 'Welcome to Your Vue.js App' } }, components: { Footer } } </script> 直到这里,简单的vue-cli脚手架项目也就编写完成了,运行项目,查看效果,如下图所示: ![在这里插入图片描述][20201208155720533.gif_pic_center] [Link 1]: https://blog.csdn.net/qq_44973159/article/details/108732828 [2020120714453543.png]: /images/20221120/2de98317e8d24ecd865031aff871ceb2.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201207154829429.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210228211754203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201215164548383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201208091921478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201207173614795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020120809231938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201208092358869.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70 [20201208155720533.gif_pic_center]: https://img-blog.csdnimg.cn/20201208155720533.gif#pic_center
还没有评论,来说两句吧...