Vue开发环境搭建

Vue开发环境搭建

NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。我们搭建Vue的开发环境就必不可少的用到Node和NPM。

1 软件安装

1.1 下载Node.js

下载地址:https://nodejs.org/en/

推荐下载LTS版本。

安装完成后,在控制台输入:

node -v

看到版本信息

1.2 NPM

Node自带了NPM,在控制台输入npm -v查看:

npm默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具:nrm

我们首先安装nrm,这里-g代表全局安装。可能需要一点儿时间

npm install nrm -g

通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:

我们通过nrm use taobao来指定要使用的镜像源:

nrm use taobao

通过nrm test npm来测试速度:

nrm test npm

注意:

  • 有教程推荐大家使用cnpm命令,但是使用发现cnpm有时会有bug,不推荐。
  • 安装完成请一定要重启下电脑!!!
  • 安装完成请一定要重启下电脑!!!
  • 安装完成请一定要重启下电脑!!!

2 创建工程(普通创建)

创建一个新工程

然后新建一个module:

位置信息:

3 安装vue

3.1 下载安装

下载地址:https://github.com/vuejs/vue

可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下载解压,得到vue.js文件。

3.2 使用CDN安装

或者也可以直接使用公共的CDN服务:

<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3.3 推荐npm安装

在idea的左下角,有个Terminal按钮,点击打开控制台:

进入hello-vue目录,先输入:npm init -y进行初始化

安装Vue,输入命令:npm install vue --save

然后就会在hello-vue目录发现一个node_modules目录,并且在下面有一个vue目录。

node_modules是通过npm安装的所有模块的默认位置。

4 vue-cli(vue-cli创建)

在开发中,需要打包很多东西包括js、css、html。还有更多的东西要处理,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli

使用它能快速的构建一个web工程模板。

官网:https://github.com/vuejs/vue-cli

安装命令:npm install -g vue-cli

4.1 快速上手

我们新建一个module:

切换到该目录:

用vue-cli命令,快速搭建一个webpack的项目:vue init webpack

前几项都是默认或者yes

下面我们选no

最后,再选yes,使用npm安装

开始初始化项目,并安装依赖,可能需要

安装成功

可以使用npm run dev命令启动。

5 项目结构

安装好的项目结构

入口文件:main.js

5.1 单文件组件

需要注意的是,我们看到有一类后缀名为.vue的文件,我们称为单文件组件。

每一个.vue文件,就是一个独立的vue组件。类似于我们刚才写的login.js和register.js

只不过,我们在js中编写 html模板和样式非常的不友好,而且没有语法提示和高亮。

而单文件组件中包含三部分内容:

  • template:模板,支持html语法高亮和提示
  • script:js脚本,这里编写的就是vue的组件对象,还可以有data(){}等
  • style:样式,支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS,互不干扰,真正做到可独立复用。

6 运行

看看生成的package.json

  • 可以看到这引入了非常多的依赖,绝大多数都是开发期依赖,比如大量的加载器。
  • 运行时依赖只有vue和vue-router
  • 脚本有三个:
    • dev:使用了webpack-dev-server命令,开发时热部署使用
    • start:使用了npm run dev命令,与上面的dev效果完全一样,当脚本名为“start”时,可以省略“run”。
    • build:等同于webpack的打包功能,会打包到dist目录下。

我们执行npm run dev 或者 npm start 都可以启动项目:

posted @ 2020-07-08 09:56  胖墩哥  阅读(183)  评论(0编辑  收藏