空夜

vue.js项目创建与第一个示例
环境搭建安装node.js首先,需要安装node.js。这个在win10系统中是自带的,可以使用命令行node -...
扫描右侧二维码阅读全文
12
2019/01

vue.js项目创建与第一个示例

环境搭建

安装node.js

首先,需要安装node.js。这个在win10系统中是自带的,可以使用命令行node -v查看版本。
正常来说,为了使用vue.js,我们需要下载更高版本的node.js。
官网地址:https://nodejs.org/en/
在这里插入图片描述
一般建议选择左侧LTS版本下载。下载完成后安装,使其覆盖原来的node.js即可。注意在选择环境时建议选择最后一项(同时安装node.js和npm的)。

附上一个详细的node.js安装教程链接:https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html

安装vue

此处我们使用vue-cli进行安装,它将包含vue(也就是不需要再进行vue的安装操作)
安装命令:npm install -g vue-cli

最新的vue-cli 3安装命令:npm install -g @vue/cli
建议不要安装Vue CLI 3,我第一次安装完成后发现无论是使用命令行还是使用WebStorm都无法创建项目。


创建项目

推荐两种vue项目创建方式:命令行或者WebStorm

使用命令行创建vue.js项目

使用命令vue init webpack project_name来快速创建一个vue项目。
下面为命令执行过程,其中的各项配置根据需要自行指定即可:
在这里插入图片描述

使用WebStorm打开该项目:
在这里插入图片描述

使用WebStorm创建vue.js项目

也可以使用WebStorm创建vue项目(据说是目前对前端开发者支持最好的开发软件了,jetbrains大法好啊)。下面介绍一下具体流程:
首先选择创建新项目:
在这里插入图片描述

然后选择vue.js,输入项目名称,自动匹配node.js,vue-cli的地址(所以必须还要先配置node和vue-cli的环境):
在这里插入图片描述

下面一路next,与命令行中的可选项基本类似,顺序操作即可。


运行与展示

项目创建完毕后,我们来试着运行一下:
首先点击图示按钮添加启动配置:
在这里插入图片描述

选择npm,选择命令run,脚本为dev:
在这里插入图片描述

点击右上角启动按钮,直到控制台如下:
在这里插入图片描述

我们打开浏览器,访问控制台里面给出的地址:http://localhost:8082,可以看到如下界面:
在这里插入图片描述

这个图片就对应着我们项目components文件夹下默认的HelloWorld.vue界面。项目创建成功后呢,我们可以在此基础上添加自己想要的界面、组件等等。


好了,有关如何创建一个独立的vue项目的介绍就到此为止啦。
最近正在学习vue,所以之后应该会出一连续的较为基础的教程或者说笔记。希望大家喜欢!


交流

如果大家有兴趣一起学习技术,一起交流讨论,可以加入QQ群:701365388,目前基本没什么人气啦(ฅ´ω`ฅ),不过有问题群主会努力解答的。嘿嘿٩(ˊᗜˋ*)و。

If you have any problem or ideas about my blogs or projects, you can contact me using any ways in the following list →_→:

Last modification:January 12th, 2019 at 11:58 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment