Watch 1 Star 1 Fork 0

YqqDocument / webother

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
前端web技术相关资料,摘记整理 spread retract

Clone or download
Vue.js开发环境搭建.md 4.76 KB
Copy Edit Web IDE Raw Blame History
yuan authored 2019-11-15 08:03 . 上传文档

Vue.js开发环境搭建

开发环境所需安装内容

  • Node.js :javascript运行环境(runtime),不同系统直接运行各种编程语言,[下载地址][https://nodejs.org/zh-cn/]。
  • npm:Nodejs下的包管理器。安装完Node.js后自带,但由于国内使用npm会很慢,一般使用[淘宝NPM镜像][http://npm.taobao.org/]。
  • webpack:通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
  • vue-cli:生成Vue工程模板。
  • Visual Stuido Code:微软轻量级开发编辑工具,[下载地址][[https://code.visualstudio.com]

环境安装

安装Node.js

从node.js官网下载并安装node,一路“下一步”即可。 安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

1555061945394

安装cnpm

npm包管理器,是集成在node中的,所以,直接输入 npm -v就会如下图所示,显示出npm的版本信息。

1555062028843

由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以我还需要npm的国内镜像—cnpm。

在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。

完成之后,可以用cnpm代替npm来安装依赖包了。

安装Webpack

在命令行中输入 cnpm install webpack -g或者(npm install webpack -g)也可以npm install -g webpack,安装完成之后输入webpack -v 如果出现相应版本号,则说明安装成功。

安装vue-cli

在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。 通过以上三部,我们需要准备的环境和工具都准备好了,可以开始使用vue-cli来构建项目。

安装配置visual studio code

安装

到微软下载地址下载安装包后直接点击下载即可。

汉化

打开vs code 点击扩展图标

1555062715787

在搜索栏里输入“Chinese (Simplified) Language Pack for Visual Studio Code”(输入Chinese就能看到)。

1555062754108

点击任意一个绿色的方框(安装),安装完成后出现右下角的提示,点击“yes”,保存并重启VSCode即可。

1555062828488

创建项目

用vue-cli构建项目

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。

1555116371350

在桌面目录下,在命令行中运行命令 vue init webpack firstVue 。这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。

1555116742401

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填可以直接回车默认。

1555116846951

如上图桌面已生成firstVue文件夹,打开firstVue文件夹,项目文件如下所示。

1555117044149

这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。

1555117175783

安装项目所需依赖

要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装。

安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

1555117452341

安装完依赖包之后,就可以运行整个项目了。

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

1555117703814

其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

1555117760374

Comment ( 0 )

Sign in for post a comment

other
1
https://gitee.com/YqqDocument/web.git
git@gitee.com:YqqDocument/web.git
YqqDocument
web
web
master

Help Search