前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue入门 - 环境搭建&项目初始化(HelloWorld)

Vue入门 - 环境搭建&项目初始化(HelloWorld)

作者头像
KenTalk
发布2023-04-07 15:40:22
7460
发布2023-04-07 15:40:22
举报
文章被收录于专栏:Ken的杂谈

一、nodejs安装

访问 https://nodejs.org/en/ ,下载并安装LTS版本

Windows建议安装在 C:\nodejs目录

查看node安装版本,验证是否安装成功

代码语言:javascript
复制
node -v

二、Vue环境安装

1、更换NPM源

代码语言:javascript
复制
npm config set registry https://registry.npm.taobao.org --global

2、Vue安装

  • Vue 2.x安装
代码语言:javascript
复制
npm install -g vue-cli
  • Vue 3.x安装
代码语言:javascript
复制
npm install -g @vue/cli
npm i -g @vue/cli-init

三、webpack安装

代码语言:javascript
复制
npm install -g webpack

四、Hello World

1、项目初始化

  • Vue 2.x
代码语言:javascript
复制
d: && cd d:\projects
vue init webpack vuedemo
代码语言:javascript
复制
? Project name vuedemo
? Project description A Vue.js project
? Author Ken <m@ken.io>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vuedemo".


# Installing project dependencies ...
# ========================
  • Vue 3.x

通过Vue CLI初始化项目

代码语言:javascript
复制
d: && cd d:\projects
vue create vuedemo

Vue-Cli提供了三个选项,这里我们选择第2个即可

代码语言:javascript
复制
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

2、项目运行

  • 进入项目命令并安装项目依赖
代码语言:javascript
复制
cd vuedemo
npm install
  • 项目运行
代码语言:javascript
复制
#vue 2.x
npm run dev

#vue 3.x
npm run serve

访问:http://localhost:8080

五、可能碰到的问题

1、node命令不存在

解决办法:配置环境变量PATH,增加:C:\Program Files\nodejs

2、安装vue-cli报错

permissions of the file and its containing directories, or try running, the command again as root/Administrator.

解决办法:使用sudo命令

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/10/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、nodejs安装
  • 二、Vue环境安装
    • 1、更换NPM源
      • 2、Vue安装
      • 三、webpack安装
      • 四、Hello World
        • 1、项目初始化
          • 2、项目运行
          • 五、可能碰到的问题
            • 1、node命令不存在
              • 2、安装vue-cli报错
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档