Vue脚手架搭建及说明

牛仔很会忙

已于 2022-07-07 14:30:29 修改

阅读量282

点赞数

文章标签： vue.js 前端 javascript

于 2022-07-05 23:26:44 首次发布

本文链接：https://blog.csdn.net/m0_66970189/article/details/125590947

版权

创建vue脚手架需要依赖node环境，需要先将node装好，可以直接去官网下载
打开包管理系统（windows+r）输入指令 npm install -g @vue/cli进行全局安装vue脚手架，可能会需要很久的时间
新建一个文件夹，在这个文件夹的地址栏输入“cmd”，打开包管理系统
创建项目 npm create 项目名称，注意项目名称不要大写
创建好项目以后，输入npm run serve启动项目，等到它返回一个网址的时候，复制local的地址在浏览器中打开就行了（还可以通过vscode的集成终端进行操作）
打包项目，输入npm build

这样我们一个相对完整的vue项目的框架就搭好了，之后就可以在里面进行编辑、操作了

再来看一看项目中的几个文件夹分别是放什么文件的

dist：打包完成的文件夹，里面包含一个css文件夹，一个js文件夹，一个ico图，一个html文件
node_modules：依赖项，我们如果需要将项目发给别人是不需要将这个文件夹发给别人的，因为这个文件夹有上万个文件在里面。另外，如果别人将一个vue项目发给你，那么你要在这个文件夹中打开包管理系统或者通过vscode打开集成终端，输入npm install进行安装依赖项，之后就可以正常使用别人的vue项目了
public：存放html文件，一般只有一个index.html
src：编写文件，我们进行的操作主要就在这个文件夹里
其他外部文件为配置文件

在src中，

给routerlink标签添加事件不管用的话，需要使用修饰符.native
vue初始化页面出现闪动
首先在标签上添加v-cloak属性
然后在css文件中，加上[v-cloak]{display:none;}
没有作用的话在根元素标签加上style=“display：none；” :display：“{display：‘block’}”