大家好,欢迎来到IT知识分享网。
一、Vue项目化
1.1快速构建项目
1.1.1 Vue ClI简介
Vue CLI是一个基于vue.js进行快速开发的完整系统,是一组用于快速原型设计、简化应用程序搭建和进行高效项目管理的工具,确保了各种构建工具能够给予智能的默认配置即可平稳衔接。这样,开发者可以专注在。撰写应用上,而不必花很多时间处理配置的问题。
1.1.2Vue ClI三个组件
1、CLI
CLI是一个npm包,通过Vue.js命令提供核心功能。它可以轻松构建一个新项目,同时,如果你希望通过可视化界面来构建(创建)项目的话,你可以运行vue ui命令行来打开可视化界面。
2、CLI Service
CLI Service是一个开发依赖项,安装在脚手架项目当中,可以帮助开发项目、打包项目和检查项目的一些相关配置。
3、CLI插件
CLI插件也是npm的包,可以为项目提供一些额外的功能,在开发的过程中,可以通过命令行vue add添加CLI插件,比如路由插件(vue-router)、vuex插件等等。
1.1.3vue脚手架项目环境配置
1、下载安装node,下载之后一步步默认安装即可。
软件地址:下载 | Node.js 中文网 (nodejs.cn)
2、检查是否安装成功:按住电脑的win+R键盘,调出终端控制台,输入命令行:node -v或node –version,如果能出现以下界面,即代码node安装成功。
3、下载安装VScode代码编辑工具
官网地址:Visual Studio Code – Code Editing. Redefined
4、vue2项目调试插件,下载vue.js_devtools,本课程使用此插件
下载,解压,把.crx结尾的文件拖入浏览器的扩展程序中即可使用。
1.1.4使用Vue Cll构建项目
1、Vue CLI手脚架的安装
a.如果已经安装了vue-cli,需要进行卸载
命令: npm uninstall vue-cli -g
b.通过npm全局安装@vue/cli脚手架
2、Vue create命名创建项目
1.创建项目时需要的命令:Vue create 项目名
执行命令后
2.在这个步骤中,可以使用键盘的↑和↓方向键选择创建项目的方式,default是默认选择项,表示使用默认的方式创建项目;Manually select features选项表示使用手动配置方式创建项目,在这里,我们选择手动的方式创建,手动配置界面如下图所示:
此界面中,可以使用键盘的↑和↓方向键选择创建项目的方式,按住空格键选择某一项,再次按住空格键,取消选择。
然后我们的项目就已经创建成功了。
1.2启动项目
1.2.1如何启动项目
我们进入项目后在查看中选择终端,然后在控制台输入命令:npm run serve
以下便是项目启动成功
注:
npm常用命令行:
npm install:安装项目所需要的全部依赖包,需要配置package.json文件。
npm uninstall:卸载指定名称的包。
npm install 包名:安装指定名称的包。
npm update:更新指定名称的包。
npm run serve:项目启动。
npm run build:项目构建。
npm config get registry :查看当前npm下载包使用的是哪一个源。
cmd命令行输入指令安装淘宝镜像:
npm install -g cnpm –registry=https://registry.npm.taobao.org
这样我们的项目就创建完成了。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/125535.html