0
点赞
收藏
分享

微信扫一扫

vue-cli的使用和单页面应用程序、使用vue-cli脚手架创建vue项目步骤

毅会 2023-04-25 阅读 70

1.vue-cli的使用

 vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。

引用自vue-cli官网上的一句话:
程序员可以专注在撰写应用上,而不必花好几天去纠结webpack配置的问题。

中文官网: https://cli.vuejs.org/zh/

1.1 安装

vue-cli是npm上的一个全局包,使用npm install命令,即可方便的把它安装到自己的电脑上:

快速生成工程化的Vue项目:

以上安装直接 cmd 打开一个终端进行安装就可以了。

点击地址栏,然后输入cmd单击一下就可以进入当前终端。

使用 vue create 项目名称创建一个vue项目时:

可以用上下箭头选择

接下来是:

 现在可以先不用装Linter/Formatter,这个是规定代码规范的,后面会讲;

 接下来:

 然后:

这个我们通常选第一项;

然后:

 如果选Y,则再:

 再点回车,就开始创建vue项目;

 记住终端窗口不能关闭,否则就无法访问该网站了;

如果窗口关闭了可以点击项目中的 package.json 文件,然后有:

 直接 npm run serve就可以继续访问了。

2. vue项目中 src 目录的构成:

 4. vue项目的运行流程

在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中:

  1. App.vue 用来编写待渲染的模板结构
  2. index.html 中需要预留一个 el 区域
  3. main.js 把 App.vue 渲染到了 index.html 所预留的区域中

 

 

2.什么是单页面应用程序

单页面应用程序(英文名: Single Page Application)简称SPA,顾名思义,指的是一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。

举报

相关推荐

0 条评论