首页 > 技术文章 > vue3移动端开发项目实战二:用vue-cli脚手架创建一个vue3项目

pfm33 2022-05-07 16:01 原文

创建vue3项目步骤如下:

 

第1步:使用 npm 指令安装vue-cli 。

打开命令工具输入 npm install -g @vue/cli安装vue-cli的最新版本 , 如下图:

安装的过程中可能会报错如下:

解决方法:按提示在指令后加入 --force条件 :npm install -g @vue/cli --force

安装完成后在命令工具中输入 npm vue-cli -v可以查看到版本号,比较安装成功了。

 

第2步:新建一个文件夹,比如路径是:D:\demo\vuedemo 用来存放项目文件。

 

第3步:在命令工具中用cd命令转到该目录D:\demo\vuedemo(快捷方式:在该文件夹的地址栏上输入cmd后按enter键也可以),

然后输入命令:vue create abc,abc是项目名称,按enter键后会出现选择vue版本的画面,如下:

默认是vue3,可用上下箭头键切换不同版本,这里我们不需要切换,按enter键后继续,之后就创建成功了,如下图:

打开目录 D:\demo\vuedemo\abc , 可以看到项目已经创建好,如下图:

其中node_modules是引入的外部js包的存放目录(用 npm install xxx 安装js包时会将包文件下载到这个目录)

public放公共文件,因为是基于vue3的单页应用,这里一般是index.html文件及一些公共资源。

src存放我们写的页面代码,可以使用VisualStudioCode开发工具来写我们的应用程序页面。

 

注:单页应用的特点是整个网站编译完成后只有一个index.html文件,这个页面是所有其他页面的载体,

我们自己写的页面以 .vue结尾 , 称为组件Component , 用户的操作由vue框架处理后调用相应的xxx.vue文件

并生成dom文档挂载到index.html文件的div节点中,index.html文件非常简单只有一个根div节点,如下:

后面我们再来展开如何写.vue页面。

 

第4步:将命令工具的目录指向:D:\demo\vuedemo\abc , 然后输入命令:npm run serve,可以看到

web服务已经成功启动,如下图:

打开浏览器,输入 http://localhost:8080 ,可以看到第一个vue3页面了,如下图:

 

至此,vue3的项目就搭建完成,剩下的就是编写页面了。

 

推荐阅读