Vue学习之node.js环境下利用Vue-cli脚手架搭建Vue项目

简介: 之前练习了Vue一些基础的命令标签,在学习中在遇到一些基础知识我会继续向里面进行补充。

第一个Vue-cli应用

之前练习了Vue一些基础的命令标签,在学习中在遇到一些基础知识我会继续向里面进行补充。


链接在这里:Vue原理与基础语法事件标签总结


但是大多数开发都是采用的vuecli来进行,这样能能够实现组件化开发,提高开发效率和成本,首先就是安装vuecli。

什么是vue-cli?

vue-cli 官方提供的一个脚手架(预先定义好的目录结构及基础代码,咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架。

vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included。

vue-cli主要功能:

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

这里比较优秀的就是热部署,就和SpringBoot项目一样,能够自动的进行编译运行,不用开发者手动去点击,超爽!


搭建需要的环境

在这里我们要安装Node.js和git,node.js安装比较简单,直接去官网 http://nodejs.cn/download 下载安装,此处不再赘述。


git安装教程在这里哈:Git和SVN的区别并在Windows电脑安装Git

其实我并不推荐这样的直接下载安装,还是要先安装nvm然后再安装node.js,推荐这种安装吧,还不了解nvm、node.js、npm的关系,那先了解一下,点这里:nvm、node、npm之间的关系和区别

ok,接下来就是安装nvm了,首先我们用nvm来安装node,这里有教程,大家可以参考一下.

1、nvm-windows下载

下载地址:

https://github.com/coreybutler/nvm-windows/releases

下载nvm-setup.zip

20200710211600129.jpg

2、安装nvm

首先把nvm-setup.zip解压到比如E:/dev/nvm 中(其它盘也可以);然后以管理员的身份运行nvm-setup . 选择nvm安装目录为E:\dev\nvm,node安装目录为 E:\dev\nodejs,修改settings.txt的内容为:

root: E:\dev\nvm
path: E:\dev\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

3、修改nvm环境变量

我的电脑->属性->高级系统设置->环境变量,在用户变量中添加环境变量

NVM_HOME:E:\dev\nvm
NVM_SYMLINK:E:\dev\nodejs
PATH:%NVM_HOME%;%NVM_SYMLINK%(path已存【%NVM_HOME%;%NVM_SYMLINK%】在添加到最后)

4、通过nvm安装node

nvm -v // 查看nvm版本
nvm install 8.12.0 // 下载指定版本 nvm install latest安装最新版本
nvm use 8.12.0 // 使用指定版本
nvm ls // 查看已经安装的nodejs版本
node -v // 查看nodejs版本

5、安装全局npm

安装node的时候,npm其实也已经一起安装了。因为nvm可以管理多个版本的node,如果每次添加一个node版本都要安装一堆的包很麻烦,如果有一个npm可以让各个版本的node共用,就不会这么麻烦了,这就是为什么我们要配置一个全局的npm的原因。简单的三步就可以配置一个全局的npm

1.  npm config set prefix "E:\dev\nvm\npm"//配置用npm下载包时全局安装的包路径
2.  npm install npm -g --registry=https://registry.npm.taobao.org //安装全局npm,不同的node都使用这个npm,想更新全局的npm的话首先删除全局路径(就是上一行命令的地址,可以使用npm config ls查看)下的npm,再执行一次这个命令即可
3.  在用户变量中添加 NPM_HOME=E:\dev\nvm\npm,path中添加%NPM-HOME%

6、一些替代npm的方式

npm install -g cnpm --registry=https://registry.npm.taobao.org //使用淘宝镜像cnmp替代npm
npm install -g yarn//使用yarn替代npm
npm config get prefix//查看npm路径

20200710212047278.jpg

注意: 这是我的npm的版本和node.js的版本,因为我是之前装的,不是采用nvm,所以没有nvm的版本查看,但是一定推荐大家用nvm来进行安装,否则当你卸载node.js之后就很麻烦,可能卸载不干净,用nvm来操作可以实现多个版本的控制和使用,灵活高效。


安装vue-cli

接下来就是安装Vuecli脚手架了,代码如下:

cnpm install vue-cli -g

这里采用的是cnpm,就是国内的,速度比较快。

20200711092003724.jpg

安装完成后 vue list 来查看vue安装情况:

20200711092126753.jpg

第一个脚手项目配置

开始创建第一个vue项目,这里项目名称为myvue 运行下面的命令:

# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue

20200711093108981.jpg


** 说明:**

Project name:项目名称,默认 回车 即可

Project description:项目描述,默认 回车 即可

Author:项目作者,默认 回车 即可

Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)

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:创建完成后直接初始化,选择 n,我们手动执行

命令行运行Vue项目

初始化并运行
cd myvue
npm install
npm run dev

20200711093745516.jpg20200711093846939.jpg

接下来我们运行命令行上面提示的地址:http://localhost:8080 如下:

20200711094051251.jpg

运行成功。


IDEA运行Vue项目

我们可以把我们的项目拷贝出来,用IDEA打开,有WebStrom的可以用WebStorm,由于我是一个后端开发人员,所以还是先用IDEA,都是一样的。找到我们的项目:

C:\Users\Administrator\myvue 用IDEA打开,目录如下:

20200711101149738.jpg

一定要记得下载Vue.js这个插件,这样才能够将我们的项目运行起来。

20200711101108715.jpg

安装完成后点击run->EditConfigurations->点击添加选择npm

20200711102233753.jpg

我们点击运行

20200711102428432.jpg

出现如下界面就是成功了。运行localhost:8080测试一下:

20200711102536324.jpg

当我们修改Vue内容的时候不用再次部署运行,就可以直接进行展示,比如在这里我将主页的名称改成别的

未改前:

20200711103148459.jpg

修改HelloWorld.vue下的export default中的msg属性:

export default {
  name: 'HelloWorld',
  data () {
    return {
      //msg: 'Welcome to Your Vue.js App'
      msg: 'My name is zhangxianxian'
    }
  }
}

修改后效果如下:


20200711103112447.jpg

说明

build 和 config: WebPack 配置文件

node_modules: 用于存放 npm install 安装的依赖文件

src: 项目源码目录

static: 静态资源文件

.babelrc: Babel 配置文件,主要作用是将 ES6 转换为 ES5

.editorconfig: 编辑器配置

eslintignore: 需要忽略的语法检查配置文件

.gitignore: git 忽略的配置文件

.postcssrc.js: css 相关配置文件,其中内部的 module.exports: 是 NodeJS 模块化语法

index.html: 首页,仅作为模板页,实际开发时不使用

package.json: 项目的配置文件

name: 项目名称

version: 项目版本

description: 项目描述

author: 项目作者

scripts: 封装常用命令

dependencies: 生产环境依赖

devDependencies: 开发环境依赖


其实Vue涉及到很多的新的语法,深度学习的话还要学习一下ES6才行,不断进步,慢慢来。

相关文章
|
2天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
38 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
3天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
42 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
2天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
28 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
6天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
45 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
3月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
95 4
|
3月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
3月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
67 1
|
前端开发 JavaScript 测试技术
JavaScript语言基础-环境搭建
<span style="font-size:14px;">我们要想编写和运行JavaScript脚本,则需要:JavaScript编辑工具和JavaScript运行测试环境。下面我们分别介绍一下。<br>JavaScript编辑工具<br>JavaScript编辑工具最简单的可以使用一些文本编辑工具,但是它们往往缺少语法提示,有的语法关键字还没有高亮显示,最重要的是它们大部分不支持调试。考虑
1815 0
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
48 1
JavaScript中的原型 保姆级文章一文搞懂
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
135 2

热门文章

最新文章