vue.js的手脚架vue-cli项目搭建的步骤
手脚架是什么?
众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了。
我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli,
但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效。
然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的模板(存放在不同的服务器上)复制到本地作为项目初始结构, 官网给出了两个模板: webpack-simple 和 webpack 两种。
两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能,普通项目基本用webpack-simple 就足够了。
我用的是wbpack这个。
关于自己是否能搭建一套手脚架,这个是肯定的,只有自己写好模板,放在github上就OK了。在以后的项目搭建就可以使用自己搭建的手脚架了。
vue-cli的使用
在这里,由于我使用的代码编辑器是vs code,所以我就按着vs code的界面来展示;
下面讲到其他命令在其他的带有终端的代码编辑器也可以使用
第一步:安装vue-cli
npm install -g vue-cli
安装完成后,可以通过命令
vue list 查看有哪些模板可以调用;
第二步:搭建项目目录
命令格式:vue init <template-name> <project-name>
<template-name>:指上方的众多模板;
<project-name>: 指自己项目的名称;
例如:我使用的是webpack这个模板: vue init webpack vuetest
第三步:安装依赖
进入新建立的文件夹里面:
命令格式:cd vuetest
在文件夹里面去安装依赖
命令格式:npm install
注意:
不用使用cnpm 淘宝这包管理器来安装依赖,这样会缺失比较多的东西;
虽然用npm去下载依赖很慢,毕竟连的是国外的链接;
下面是以来所在的地方:
第四步:直接运行
命令格式:npm run dev
直接在终端里面输入这段命令就OK了;
默认是本地的8080端口:
到这里已经OK了!
使用webpage模板搭建的vue项目目录就OK了;
注意:
在运行 npm run dev 中可以使用 cnpm run dev 来代替。
其中
安装cnpm
命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
其他用法和npm差不过。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue3+vite中报错信息处理方法Error: Module “path“ has&nb
这篇文章主要介绍了vue3+vite中报错信息处理方法Error: Module “path“ has been externalized for browser compatibility...,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03vue等框架对Tabs、Moda等设置固定高度后没有滚动条问题
这篇文章主要介绍了vue等框架对Tabs、Moda等设置固定高度后没有滚动条问题,解决方法很简单,只需要一行简短代码就可以解决,下面小编给大家详细讲解,需要的朋友可以参考下2023-05-05ant-design-vue中设置Table每页显示的条目数量方式
这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10vue使用v-if v-show页面闪烁,div闪现的解决方法
在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果。怎么处理这样的问题呢,下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法,一起看看吧2018-10-10
最新评论