随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)

一、简介

vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。更多详细介绍请移步vue官网。

二、webstorm安装

这里我们使用webstorm来作为IDE,WebStorm是jetbrains公司旗下一款JavaScript 开发工具,和IntelliJ IDEA同源,非常强大,关于他的下载和安装,网上有很多教程,这里就不多说了。

三、node.js的安装

Node.js是一个Javascript运行环境,关于node.js的更多详细介绍参考这篇文章:

初识NodeJS,一个基于GoogleV8引擎的Javascript运行环境

新版的node安装完成后,npm也安装完成了,npm介绍请参考:NPM 使用介绍

四、安装Git

参考:Git下载、安装

做好准备工作后,就可以开始创建vue项目了

五、使用vue-cli构建vue项目

vue-cli是vue.js脚手架,用于自动生成vue.js+webpack的项目模板。

使用步骤如下:

建立一个项目的文件夹,我的命名为MyVueProject,然后进入到这个文件夹,右键,选择Git Bash Here。

输入命令行:npm install vue-cli -g(下载全局vue-cli)

下载完成后,输入命令行:vue init webpack myproject ,myproject 是项目名称。然后控制台会询问一些问题如下:

? Project name (myproject)  项目名称(myproject)(确定按enter,否按N) 

? Project description (A Vue.js project)
项目描述(一vue.js项目)。(随意输入一段简短介绍,用英文,不写直接回车也行)

? Author (yourname <youremail>)
输入作者,然后按enter,否则N

? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere
直接翻译如下:Vue的建立(使用箭头键)>运行时+编译器:大多数用户推荐运行时间:约6kb轻民+ gzip,但模板(或任何Vue具体HTML)只允许在。VUE文件渲染功能是必需的其他地方。(按enter) 

? Install vue-router? (Y/n)
是否安装路由,建议安装。 输入Y回车

? Use ESLint to lint your code? (Y/n)
使用ESlint语法?(Y/ N)。(使用ESLint语法,就要做好心理准备,除非你非常懂ESLint语法,要不就会处处报错,之前不明白的时候选择过一次,总之很烦,若想要挑战一下,下面这个网址会给你帮助的:https://cloud.tencent.com/developer/chapter/12618        建议N) 
? Set up unit tests (Y/n) 设置单元测试?(Y / N)。(选N)

? Setup e2e tests with Nightwatch? (Y/n)
Nightwatch建立端到端的测试?(Y / N)。(选N)

? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself
(选择Yes,use NPM)

然后要等待一会,安装项目依赖

整个过程效果图如下:

现在项目已经创建好了,可以使用命令行直接启动

输入命令:cd myproject  进入到项目文件中

输入命令: npm install  初始化安装依赖
       输入命令: npm run dev  执行

启动好,就可以在浏览器输入http://localhost:8080看到欢迎页面,注意如果8080端口已经被占用,控制台会使用其它端口,有提示。

六、在webStorm中运行

如果在IDE运行工程,就用webStorm打开刚刚创建的工程

 

启动完成后,控制台会看到网址

由于刚刚使用了8080和8081端口,这里启动的8082端口,在浏览器输入该网址,可以看到一样的欢迎页面。

结合webStorm构建vue.js项目就介绍到这里。

Logo

前往低代码交流专区

更多推荐