vue详细安装教程

这里写目录标题

一、下载和安装node

官网下载地址:https://nodejs.org/en/download

选择适合自己的版本,推荐LTS,长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

下载好后,双击下载的安装包。安装node(步骤省略,一路next即可)

安装完成后,检查一下是否安装成功。

java 复制代码
node -v
java 复制代码
npm -v

输出了版本号就说明安装成功了。

二、创建全局安装目录和缓存日志目录

在我们的安装目录下,创建名为node_cache和node_global的两个文件夹。

打开Dos窗口,执行如下命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录

java 复制代码
npm config set prefix "你的安装目录\node_global"
java 复制代码
npm config set cache "你的安装目录\node_cache"

为了以后下载包快速,修改源为淘宝镜像

java 复制代码
npm config set registry https://registry.npm.taobao.org

查看npm配置修改是否成功

java 复制代码
npm config list

三、安装vue

用管理员身份运行!

Win + s 搜索 "命令提示符",右键以管理员身份运行

安装vue.js

java 复制代码
npm install vue -g

其中-g是全局安装,指安装到global全局目录去,如果不加-g,模块就会安装到当前路径下的node_modules文件夹下,没有目录则自动创建。

安装webpack模板

java 复制代码
npm install webpack -g

安装打包的客户端

java 复制代码
npm install webpack-cli -g

输入 webpack -v,能输出版本号就说明都安装好了

安装脚手架vue-cli

java 复制代码
npm install vue-cli -g

输入vue --version,能输出版本号就说明安装好了。

四、创建一个应用程序

这两个用哪个都行

java 复制代码
 vue init webpack 项目名
 vue create 项目名

创建好后执行蓝色提示命令运行项目

java 复制代码
 $ cd vuetest     # 进入项目命名的目录
 $ npm run serve  # 运行项目


使用空格选择或者去除然后回车



五、3x版本创建

Default 表示使用默认配置

Manually 自定义勾选特性配置

自定义选择要安装的插件。( 按空格是选择勾还是不勾,按回车是代表确认)

选择vue的版本

选择css预处理语言 ,勾选 Less

选择代码格式校验使用哪种校验规范 一般用第三种

ESLint + Standard config 通用规范

ESLint + Prettier 比较漂亮的规范

选择什么情况下触发代码校验,按空格表示勾选,全选然后回车

Lint on save 当修改报错文件时触发

Lint and fix on commit 当执行git committ提交时

对应Babel, ESLint等配置文件是

In dedicated config files 生成保存到独立的配置文件中

In package.json 把插件的配置信息和package.json文件写在一起

六、创建一个案例

app.vue

html 复制代码
<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script>


  import Home from "@/components/Home";
  export default {
    name: 'App',

    components: {
      Home
    }

  }
</script>

<style>
  #app {
    height: 100%;
  }


</style>

在components下创建Home

html 复制代码
<template>
  <div id="app">
  <h1>首页</h1>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</script>
相关推荐
mldong21 分钟前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字24 分钟前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
我是ed.1 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
程序视点1 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木1 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的2 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
ayas123192 小时前
CSS学习
前端·css·学习
人生在勤,不索何获-白大侠2 小时前
day25——HTML & CSS 前端开发
前端·css·html
Running_C2 小时前
Content-Type的几种类型
前端·面试
前端Hardy2 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序