一:node.js安装
-
在node.js官网下载安装包
Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/
这里我们根据自己电脑的配置进行选择,例:我的电脑是Windows 64位系统,那么就选择相对应的版本 -
.下载完成之后进行安装,默认安装路径为: C:\Program Files\nodejs ,可以更改安装路径
这里我们选择的是默认路径安装,安装完成之后会有这些文件 -
检查node.js是否安装和版本号
Windows+R键打开cmd管理工具输入命令
输入node -v 回车,查看版本号,若出现版本号说明安装成功
再输入npm -v 回车,查看npm是否安装 -
安装镜像
这里我们安装的是淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org
将淘宝镜像输入cmd管理工具,若网速较慢可以把开头 npm 改成 cnpm 来替代npm
输入淘宝镜像后按回车键,等待安装
安装成功后,输入cnpm -v 回车,查看是否安装完成
若显示以上内容,那么表示镜像安装成功
二:vue环境搭建
-
vue脚手架(Vue-cli)
Vue-cli https://www.cnblogs.com/zhaowy/p/9542369.html
Vue Cli 也叫vue脚手架,是一个基于Vue.js进行快速开发的完整系统,能帮我们方便的创建标准的vue项目
我们安装全局vue-cli脚手架: npm install --global vue-cli -
安装vue脚手架
在cmd管理工具输入: npm install --global vue-cli 回车
同上,若网速较慢可以把 npm 改成 cnpm 例: cnpm install --global vue-cli
以上就是安装成功时显示的 -
创建vue项目存放路径
先选定一个路径并创建一个文件夹,作为我们存放vue项目的文件夹
例:在E盘中创建一个叫nodejs的文件夹来存放vue项目,那个vue文件夹就是之前创建的vue项目 -
创建vue项目
打开cmd管理工具,切换路径为我们创建的文件夹的路径,或者直接在文件夹路径打开cmd
在cmd管理工具输入 vue init webpack vue项目名(自定义项目名) 按回车键进行创建
这里会让你确认这个vue项目名是不是你自定义的项目名,确认按回车键
这里是项目描述,我们不用管,继续按回车键
确认作者,可以输入自己的信息,当然也可以不输入东西
为webpack配置文件,这里我们选默认第一个,按回车键
这里让我们选择一些配置信息,选择这些配置就输入 Y 回车,不选择输入 N 回车,我们第一个选 Y 下边三个选 N
这里让我们选择安装方式,我们选择第一个npm即可,然后按回车键开始创建vue项目
当弹出这个页面时,表示创建成功,我们将路径切换至创建的vue项目文件夹,例:cd vueitem(这个是刚刚自定义的vue项目名) 回车
然后再输入 npm run dev 回车,打开我们刚刚创建的vue项目
打开后会有一个网址,图上的是 http://localhost:8080
我们将这个网址在浏览器中打开就可以查看了
三:vue项目文件介绍
-
修改vue项目端口及自动运行
打开cmd管理工具,路径切换至vue项目的路径
在cmd中输入npm run dev 回车,打开你的vue项目
当我们第一次打开vue项目时,他不会自动运行,只会给你一个地址
我们同时打开多个vue项目时,vue项目它给的地址后面端口都是8080
相同的端口会产生冲突,所以我们需要修改地址的端口
修改的方法是用编辑器打开vue项目中的config文件夹里的index.js文件
port 可以修改我们打开时的端口
autoOpenBrowser 改为true时vue项目会自动运行到浏览器中 -
vue项目结构
当我们打开vue项目文件会有这些文件
在我们项目做好打包之后还会有一个dist文件,它是webpack打包后生成静志文件目录
另外有的vue项目文件会有一个nodejs文件,它是模拟真实环境中读取服务端数据用Node js搭的本地服务器的环境 -
vue项目默认log删除
打开vue项目在里面查找src文件夹中的App.vue文件,将标准的图片删除
剩下的东西在src文件夹中components文件夹中的HelloWorld.vue文件中
将文件中div里的东西全部删除即可,注意div不能删除
原文发布时间：2020/11/22原文作者：一根倔强的头发