vue项目安装

vue项目安装

一:node.js安装

1.在node.js官网下载安装包
Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/
这里我们根据自己电脑的配置进行选择,例:我的电脑是Windows 64位系统,那么就选择相对应的版本

2. 下载完成之后进行安装,默认安装路径为: C:\Program Files\nodejs ,可以更改安装路径
   这里我们选择的是默认路径安装,安装完成之后会有这些文件

3. 检查node.js是否安装和版本号
   Windows+R键打开cmd管理工具输入命令
   输入node -v 回车,查看版本号,若出现版本号说明安装成功
   再输入npm -v 回车,查看npm是否安装
   

4. 安装镜像
   这里我们安装的是淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org
   将淘宝镜像输入cmd管理工具,若网速较慢可以把开头 npm 改成 cnpm 来替代npm
   输入淘宝镜像后按回车键,等待安装
   安装成功后,输入cnpm -v 回车,查看是否安装完成
   若显示以上内容,那么表示镜像安装成功

二:vue环境搭建

1. 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

2. 安装vue脚手架
   在cmd管理工具输入: npm install --global vue-cli 回车
   同上,若网速较慢可以把 npm 改成 cnpm 例: cnpm install --global vue-cli
   以上就是安装成功时显示的

3. 创建vue项目存放路径
   先选定一个路径并创建一个文件夹,作为我们存放vue项目的文件夹
   例:在E盘中创建一个叫nodejs的文件夹来存放vue项目,那个vue文件夹就是之前创建的vue项目

4. 创建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项目文件介绍

1. 修改vue项目端口及自动运行
   打开cmd管理工具,路径切换至vue项目的路径
   在cmd中输入npm run dev 回车,打开你的vue项目当我们第一次打开vue项目时,他不会自动运行,只会给你一个地址
   我们同时打开多个vue项目时,vue项目它给的地址后面端口都是8080
   相同的端口会产生冲突,所以我们需要修改地址的端口
   修改的方法是用编辑器打开vue项目中的config文件夹里的index.js文件
   port 可以修改我们打开时的端口
   autoOpenBrowser 改为true时vue项目会自动运行到浏览器中

2. vue项目结构
   当我们打开vue项目文件会有这些文件
   在我们项目做好打包之后还会有一个dist文件,它是webpack打包后生成静志文件目录
   另外有的vue项目文件会有一个nodejs文件,它是模拟真实环境中读取服务端数据用Node js搭的本地服务器的环境

3. vue项目默认log删除
   打开vue项目在里面查找src文件夹中的App.vue文件,将标准的图片删除
   剩下的东西在src文件夹中components文件夹中的HelloWorld.vue文件中
   
   到此完全结束,希望可以帮助你们！