第2讲：Vue开发环境的搭建及运行

Vue开发环境搭建步骤

1、安装node  http://www.nodejs.com.cn/  一般安装在根目录下，直接下一步下一步安装即可。如何检测安装完毕  node  -v

2、第二步：安装vue-cli脚手架  npm install -g @vue/cli  ，查看安装版本  vue  --version

3、第三步：项目创建  vue create  项目名字(英文)选择vue2.0

4、vue项目打开方式

  第 一步：查看 node_modules 包是否存在  node_modules 包存储的是依赖包。如果没有在项目 下 ， 打 开命令行  npm  install/i

  第 二步：如果 node_modules 包存在，直接在项目下打开命令行 npm  run  serve( 不一定是 serve, 看 package.json 中的 scripts  有可能 serve  dev )

一、安装node.js

检查环境变量配置

安装完成后打开 cmd 工具并执行 node -v 命令，将有如下提示：

        接着执行npm -v命令，将有如下提示：

        

如果没有版本号出现请检查是否将 nodejs 添加进环境变量

设置镜像源

在对 nodejs 的 npm 工具设置国内的镜像源以便于提高资源的下载速度，如下：

执行以下命令安装cnpm工具用来代替npm工具：

npm install -g cnpm -- https://registry.npmmirror.com

或者将npm源设置为淘宝镜像

npm config set registry  https://registry.npmmirror.com

执行完成后执行以下命令

npm config get registry

设置成功后将会有如图效果

二、安装vue-cli

设置好镜像源之后我们需要安装一个 vue 的脚手架工具（ vue-cli ）

    执行以下命令安装vue-cli版本

npm install -g @vue/cli 或 cnpm install -g @vue/cli

        安装之后你就可以在命令行中使用vue命令，你可以使用以下命令来检查vue-cli版本安装是否正确

vue --version

三、使用vue-cli创建vue项目

        安装好vue-cli之后我们在一个空目录下执行以下命令：

vue create hello-vue    //这里的hello-vue是项目名，可以自己定义

执行之后会有如下界面

回车后会有以下界面

选择依赖

将依赖项的配置放置在package.json中

是否将其保存为将来项目的预设？

四、打开项目及运行

下载VScode或WebStorm开发工具

         

        VSCode安装好后按Ctrl+Shift+X打开扩展中心，搜索Vetur安装扩展

打 开项目

Vue项目文件结构

使用VScode从项目根目录打开

main.js

main.js 作为应用程序的入口文件具有以下特征

  1. 实例化 Vue

  2. 放置项目中经常会用到的插件和CSS样式

  3. 存储全局变量

     。。。

package.json

在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。 package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。 package.json 作为前端的大管家，到底有哪些配置和我们的日常开发密切相关？下面就来仔细剖析一下这个文件。

当我们搭建一个新项目时，往往脚手架就帮我们初始化好了一个 package.json 配置文件，它位于项目的根目录中。

• scripts
指定了运行脚本命令的 npm 命令行缩写
如下列设置中指定了 npm run serve 所要执行的命令为 vue-cli-service serve【 即 npm run + 快捷名 】

"scripts":

 {

  "serve": "vue-cli-service serve",

  "build": "vue-cli-service build“

}

Vscode菜单->终端->新建终端

dependencies — 指定了项目运行所依赖的模 块

devDependencies — 指定了项目开发所需要的模 块

browserslist — 用以兼容各种浏览 器

"browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead"

  ]

运行vue-cli创建vue项目

        安装完成后键入如下命令运行刚刚创建的vue项目

cd hello-vue
npm run serve

打开浏览器输入http://localhost:8080将会看到我们刚刚创建的Vue项目

本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂

讲师课堂链接：https://edu.csdn.net/lecturer/893