vue 项目初始化与部署（上册）

最新推荐文章于 2024-06-01 15:46:07 发布

似吻火

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量821

点赞数 27

分类专栏： JavaWeb 文章标签： vue.js vim 前端 node.js

本文链接：https://blog.csdn.net/weixin_63780361/article/details/136416922

版权

JavaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue 项目初始化

一、安装node.js

(一)下载node.js的安装包

官网下载地址：http://nodejs.cn/download/

在这里插入图片描述

也可以在下方选择符合自己电脑的操作系统位数

在这里插入图片描述

点击即可下载

Node.js 历史版本下载地址：https://nodejs.org/dist/

（二）window安装node.js

本文实例以 node-v18.19.0 版本为例，其他版本类似，安装步骤如下：

1.鼠标右键单击下载后的安装包 node-v18.19.0-x64.msi，选择安装，如下图所示：

在这里插入图片描述

2.进入到 Node.js Setup 界面，直接单击 Next 按钮即可，如下图所示：

在这里插入图片描述

3.勾选接受协议选项，点击 Next(下一步) 按钮 :

在这里插入图片描述

4.Node.js 路径修改为自己熟悉的目录，并点击 Next(下一步) 按钮：

在这里插入图片描述

5.继续点击next

在这里插入图片描述

6.继续点击next

在这里插入图片描述

7.点击安装（Install）

在这里插入图片描述

你也可以点击 Back(返回) 来修改先前的配置。

8.点击finish

在这里插入图片描述

9.安装完后检验版本，Win + R，输入 cmd 回车，打开 dos 命令行，输入 node -v 查看 nodejs 版本号，如下图所示：

在这里插入图片描述

（三）配置npm在安装全局模块时的路径和缓存cache的路径

1.在D:\soft\node 目录下新建两个文件夹 node_global 和 node_cache，如下图所示：

在这里插入图片描述

2.然后在 cmd 命令下执行如下两个命令：

npm config set prefix "D:\soft\node\node_global"
npm config set cache "D:\soft\node\node_cache"

在这里插入图片描述

3.然后右击此电脑 --> 属性 --> 高级系统设置 --> 环境变量 --> 系统变量中新建一个变量名为 NODE_PATH，值为 D:\soft\node\node_global\node_modules，如下图所示：

在这里插入图片描述

4.在系统变量中的Path变量,分别新建值为D:\soft\node\node_global,

%NODE_PATH%

在这里插入图片描述

5.在 cmd 命令(注意这里要以管理员身份运行，否则会报权限不足的错误) 下执行 npm install webpack -g 和 npm install webpack-cli -g 安装 webpack，如下图所示：

在这里插入图片描述

6.如果显示的是这个，就说明安装成功

在这里插入图片描述

自定义文件夹如下所示：

在这里插入图片描述

二、全局安装Vue CLI(脚手架工具)

(一)全局安装Vue CLI

win+R输入cmd，打开“命令提示符”窗口，输入此命令，回车

//全局安装vue-cli

cnpm install vue-cli -g

测试是否安装成功,可以查看基于哪些模板创建vue应用程序，通常我们选择webpack

vue list

在这里插入图片描述

（二）安装vue

在cmd窗口执行这个操作：

npm install vue

在这里插入图片描述

#三、idea安装vue.js插件

1.打开idea，在上方文件file 中选中settings

在这里插入图片描述

2.如果找不到vue.js,可以参考https://blog.csdn.net/xiaoyaozizai1/article/details/129142262

在这里插入图片描述

四、创建一个新的vue项目

（一）IDEA配置vue

1.点击左上角file–>new–>Project 在这里插入图片描述

2.点击左侧JavaScript，找到Vue.js,点击Next下一步

在这里插入图片描述

3.写入项目名，其他默认即可，点击Finish（注意：项目名不能用驼峰法命名）

在这里插入图片描述

(二)让Vue的后缀文件(.vue)能够识别HTML格式

1.首先在File中打开Settings -->Editor–>File Types，然后再下拉选项中找到HTML，并且点击其加号添加后缀

在这里插入图片描述

2.输入*.vue,点击ok

在这里插入图片描述

(三)在IDEA中添加Vue的语法

1.在这之前我们新建一个HTML文件看一下是否有Vue语法的存在

在这里插入图片描述

输入一个v后，没有看到任何关于Vue的语法存在，那么我们就去进行配置

2.点击File–>Settings–>Editor–>Inspections–>HTML，展开HTML后找到 Unknown HTML tag attribute，然后点击其右边的拓展按钮

在这里插入图片描述

然后将准备好的语法复制粘贴，点击Apply即可

@tap
@tap.stop
@tap.prevent
@tap.once
@click
@click.stop
@click.prevent
@click.once
@change
@change.lazy
@change.number
@change.trim
v-model
v-for
v-text
v-html
v-if
v-else-if
v-else
v-pre
v-once
v-bind
scoped
@keyup.enter
:class
:style
v-show
:key
@keyup
@submit
@submit.prevent
@mouseenter
@mouseleave
@mouseout
@mouseover

在这里插入图片描述