Vue安装过程及环境配置

本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目。

通过WIN+R输入CMD打开命令行（必须是以管理员身份运行），输入：

npm config set registry https://registry.npm.taobao.org

这句命令可以更改默认设置，默认为从国外服务器下，这里使用阿里巴巴在国内的镜像服务器，下载速度快。

安装脚手架vue-cli，在命令行CMD输入如下命令：

npm install --global vue-cli

安装后，输入如下命令：

vue -V

或

vue --version

检查是否安装成功。

查看安装的vue信息：

npm info vue

查看安装的vue版本：

npm list vue

在命令行输入：

npm install -g vue-router

安装vue-router。

在命令行中运行命令：

npm install webpack -g

然后等待安装完成。

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，需要输入以下命令安装webpack-cli：

npm install --global webpack-cli

安装成功后可使用

webpack -v

查看版本号；

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

使用vue建一个项目名叫“my-project”，注意项目名不能有大写。

vue init webpack cjw-project

注：vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，配置并不全放在根目录下的webpack.config.js 中。
webpack-simple 相对简单的，根目录下才有webpack.config.js。

输入命令后需要进行一些相应的配置：

Project name（工程名）:使用小写命名后回车
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
回车；

最终vue项目初始化成功!

项目目录结构（到自己设置的路径去找没设置则在默认路径）：

项目目录中的node_modules文件夹是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。

按提示代码进入到项目目录下使用

npm run dev

之后打开本地浏览器输入：

http://localhost:8080

实时查看效果；

若浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

END

Vue安装过程及环境配置相关推荐

eclipse安装和jdk环境配置（新手详细过程）
eclipse安装和jdk环境配置,整个过程分为以下几步: 1.jdk的下载安装以及环境变量设置:(jdk安装). 注:目前jdk里面已包含jre,所以不需要进行jre的安装. 2.Eclipse的下 ...
vue开发移动端环境配置_如何设置移动开发环境
vue开发移动端环境配置 The use of mobile devices has increased considerably in the past decade. It has been ov ...
Win10系统下Python安装和Geany环境配置的几点总结
Win10系统下Python安装和Geany文本编辑器配置的几点总结 (START OF MY BLOG LIFE) 一.Python的安装 Python直接可以在官网下载(https://www.p ...
Oracle 12cR1 RAC 在VMware Workstation上安装(上)—OS环境配置
Oracle 12cR1 RAC 在VMware Workstation上安装(上)-OS环境配置 1.1 整体规划部分 1.1.1 所需软件介绍 Oracle RAC不支持异构平台.在同一个集群 ...
OpenNI的安装与开发环境配置
OpenNI的安装与开发环境配置博客分类: Kinect开发 Kinect OpenNI NITE SensorKinect Kinect作为新一代的体感设备,小斤就不多介绍咯,微软日前也发布了相应 ...
Centos7.9最小化安装与初始化环境配置
Centos7.9最小化安装与初始化环境配置镜像源下载地址:http://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/ (CentOS-7.9.20 ...
基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...
Kinect开发教程一：OpenNI的安装与开发环境配置
小斤注:关于OpenNI2.X版本的安装与开发环境配置,请参考<Kinect开发教程六:OpenNI2简介.安装与VS开发环境配置> --------------------------- ...
一文解决VS Code安装、C++环境配置、OpenCV配置
前言本文包括VScode安装.C++环境配置以及OpenCV配置全过程.VS Studio配置OpenCV比较简单,可以直接使用OpenCV官网已有的用VS Studio编译器编译好的Open ...

Vue安装过程及环境配置

Vue安装过程及环境配置

Vue安装过程及环境配置相关推荐

最新文章

热门文章