功能实现01-day2

最新推荐文章于 2024-11-06 09:59:41 发布

程序媛汤圆儿

最新推荐文章于 2024-11-06 09:59:41 发布

阅读量93

点赞数

文章标签： vue.js 前端 javascript java

本文链接：https://blog.csdn.net/weixin_39158966/article/details/129517332

版权

1.2.1搭建vue工程

以下命令使用管理员权限

（1）先下载node.js LTS，并安装node.js的npm，用于管理前端项目包依赖。这里安装node.js的14.17.3版本，方便使用Vue3

安装完毕，在命令窗口输入node -v和npm -v，出现如下字样说明安装成功：

（2）全局安装Vue插件cli：npm install -g @vue/cli，这样我们就可以创建Vue工程

安装教程：介绍 | Vue CLI

	`D:\apps\nodejs16.18.1\node_global\vue -> D:\apps\nodejs16.18.1\node_global\node_modules\@vue\cli\bin\vue.js`
	`...`
	`+ @vue/cli@5.0.8`
	`added 693 packages from 474 contributors and updated 148 packages in 263.277s`

（3）因为我们是前后端分离的，因此新建一个项目，指令vue create <项目名>，输入指令回车后会出现选择：

要使用管理员命令，否则会出错

3.1）手动选择

3.2）选择Babel，Router，Vuex

3.3）选择3.x版本

3.4）选择路由模式

3.5）选择项目依赖包管理方式

3.6）选择是否要保存当前项目的配置

3.7）创建成功：

3.8）依次输入上面提示的命令，运行vue项目：

3.9）浏览器访问

1.2.2idea配置vue项目并启动

（1）使用idea打开刚刚创建的Vue项目，点击右上角配置 Add Configuration

（2）配置启动

（3）点击箭头即可启动vue项目

（1）public/index.html页面：

	`...`
	`<body>`
	`<noscript>`
	`<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>`
	`</noscript>`
	`<div id="app"></div>`
	`<!-- built files will be auto injected -->`
	`</body>`