Vue2.0的安装

1.首先查看是否已经安装了node.js

选择以管理员方式打开命令提示符(权限较高),或者通过cmd的方式打开

打开后输入node -v 查看自己电脑是否安装node,以及版本号

复制代码
node -v

如果没有的话,请查看Node.js的安装

2.Vue和脚手架安装

安装vue.js

一般是全局安装,-g是全局安装,指安装到global全局目录去。

如果安装3.0版本的可以选择这个命令(二选一,根据自己的淘宝镜像源设置选择)

复制代码
npm install vue -g
 
 
cnpm install vue -g

需要版本为2.0版本的,使用这个命令:

复制代码
npm install -g @vue/cli

查看安装的vue信息:npm info vue 或者cnpm info vue,不过我最常用vue -V
查看安装的vue版本 npm list vue

安装webpack模板

运行命令 npm install webpack -g

复制代码
npm install webpack -g 

webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,
所以还需要安装webpack-cli:npm install --global webpack-cli

复制代码
npm install --global webpack-cli

安装成功后可使用webpack -v查看版本号。

安装vue-router

复制代码
npm install -g vue-router

3. 创建项目

1、命令创建项目

(最好在cd到D盘的某个位置,即项目的路径,否则项目会新建在C:\Users\Administrator\,也可以直接在想要的项目路径下输入cmd)

复制代码
 vue init webpack 项目名

项目名不要取中文和大写字母。

进行一些配置:

  • Project name(工程名):回车(含大写字母给我报错了,我给改了my-vue)
  • Project description(工程介绍):回车
  • Author:作者名 :回车
  • Vue build ==> (是否安装编译器)runtime-compiler、 runtime-only 都是打包方式,第二个效率更高;
  • Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到路由,所以Y 回车;
  • Use ESLint to lint your code ==> 是否需要ESLint检测代码,目前我们不需要所以 n 回车;
  • Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
  • Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车;
  • Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install
  • 回车;

2.项目仪表盘创建项目

切到项目创建的文件位置

复制代码
vue ui

3.打包上线

编写好程序后可以打包给后端,然后上线。

复制代码
npm run build
 
npm run build:prod

【超详细全过程】使用WebStorm创建一个Vue项目 - 朱李洛克 - 博客园

相关推荐
学编程就要猛9 分钟前
基于Spring AI 的智能聊天机器人
java·spring ai·chat robot
修炼室11 分钟前
Java开发工程师笔试经验贴【高频知识】
java
木井巳24 分钟前
【记忆化搜索】最长递增子序列
java·算法·leetcode·深度优先·剪枝·推荐算法
杨杨杨大侠31 分钟前
知识库已经有了,Java 程序员还要做什么?Spring AI RAG 实战
java·openai·ai编程
伊信36 分钟前
Spring AI 基础学习与应用
java·后端
夜郎king43 分钟前
基于 Java + Playwright 实现网站自动访问与数据采集(以腾讯云开发者社区为例)
java·playwright·网页数据获取
Anastasiozzzz1 小时前
重新定义 Agent 基建:Redis 在现代 AI 与智能体系统中的工程实践
java·人工智能·redis·ai
careathers1 小时前
【数据结构】队列
java·数据结构
步行cgn1 小时前
Spring 通过 factory-method 实例化 Bean 详解与常见错误排查
java·后端
lv__pf1 小时前
seata【实战 msb】
java·开发语言·后端