VUE搭建开采境况及营造项目,Vue安装以至Vue项目

这几天一直在学习Vue.js框架。

Vue.js是一套构建用户界面的渐进式框架。它既集众多优秀前端框架之大成,又保持了其简单易用的特点。对vue.js感兴趣并且已经通读官方基础教程的初学者来说,开始一个实战项目是进一步深入学习vue.js最好的方式了。在此之前,需要学会如何搭建开发环境。

因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措。

开发环境的搭建

在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建开发环境。

安装Node.js

Node.js官网:https://nodejs.org/en/

进入Node.js官网,选择下载并安装Node.js。安装过程只需要点击“下一步”即可,如下图,非常简单。

星彩网app下载 1

星彩网app下载 2

星彩网app下载 3

星彩网app下载 4

星彩网app下载 5

验证Node.js是否安装好,在windows下,win r召唤出运行窗口,输入cmd打开命令行窗口。输入node -v即可得到对应的Node.js版本。

星彩网app下载 6

npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm。输入npm -v可得到npm的版本。

星彩网app下载 7

注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0,输入以下命令更新npm至最新版本。

npm -g install npm

这里记录下搭建过程(教程参考网上各前辈提供的资料):

安装cnpm

由于资源的限制,安装npm依赖包的时候经常失败,建议使用npm的国内镜像cnpm 命令行工具代替默认的npm。

npm 国内镜像https://npm.taobao.org/

在命令行中输入以下内容等待安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Node.js:从Node.js官网安装Node.js。

cpnm全局安装vue-cli

在命令行中运行以下命令然后等待安装

星彩网app下载,cnpm install -g vue-cli

星彩网app下载 8

  安装完成后,直接在命令行程序(win R => 输入 cmd)中输入 node -v 验证是否安装成功。

构建项目

  星彩网app下载 9如图,node -v后输出了版本号“v6.11.4”,安装成功。

新建项目

在这里我将vue项目建在f盘的vueProjiects文件夹下,利用命令进入此目录。在cmd中输入盘符f:回车即可进入F盘:

星彩网app下载 10

输入命令 cd vueProjects跳到此目录下:

星彩网app下载 11

在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令:

vue init webpack my-vue-project

星彩网app下载 12

vue init webpack my-vue-project意思是初始化一个项目,利用的是webpack打包和压缩,此项目命名为my-vue-project。这样,my-vue-project文件夹就自动生成刚刚在指定的目录中,在此过程中,需要输入项目名、描述、作者等。

打开my-vue-project文件夹,项目文件如下:

星彩网app下载 13

安装淘宝npm镜像(在国内淘宝npm镜像速度较快,可代替官方npm镜像):命令提示符中输入 => npm install -g cnpm –registry= 回车,等待安装完成。

安装项目依赖

在cmd中,注意需要使用命令先定位到my-vue-project目录下,然后输入命令cnpm install安装项目所需的依赖包资源

cnpm install

星彩网app下载 14

可以看到my-vue-project文件夹下多了一个node_modules文件

星彩网app下载 15

安装vue命令行工具(Vue-CLI):命令行程序内输入 cnpm install -g vue-cli (此处输入cnpm就是表示使用淘宝npm镜像,若使用官方npm,则输入 npm install --global vue-cli),回车,等待安装完成。

运行项目

使用命令npm run dev 运行项目

npm run dev

项目运行成功后浏览器会自动打开localhost:8080呈现以下页面:

星彩网app下载 16

至此,vue的脚手架工具已经搭建完成,接下来具体项目的开发只需在src目录下进行。

【Thanks  for watching】

  安装完成后,直接在命令行程序中输入 vue 验证是否安装成功。

  星彩网app下载 17如图,出现了类似以上的信息,那么,安装成功。

安装过程告一段落。

接下来,开始创建项目。

还是在命令行程序中操作 ↓

【这一步根据喜好,自由决定是否需要,并自由决定输入内容:在创建项目前,在命令行程序中输入  cd d:文档 进入 d盘 的 文档 文件夹内。这样就可以将下面步骤创建的项目,创建在 d盘 的 文档 文件夹内。当然,如上所述,自由决定项目创建的路径。】

命令行程序中输入 vue init webpack project_folder_name (项目文件夹名自定义),回车。

稍等,会一步一步出现如下信息:

星彩网app下载 18

按照提示,完成即可。

此时,项目创建完成。

开始安装依赖:

  命令行程序中输入 cd project_folder_name (刚才自定义的项目文件夹名称)进入文件夹。

  命令行程序中输入 cnpm install (使用cnpm的原因同上面的cnpm)。回车,等待安装完成。

此时,项目文件夹目录内,应该已经有了 node_modules 文件夹,那么,恭喜!依赖安装完成。

不出意外的话,项目应该已经搭建完成了。

试一试吧:命令行程序中输入 npm run dev

星彩网app下载 19

出现以上信息后,系统将自动打开浏览器(地址为: npm run dev 后手动打开浏览器,并输入以上地址。

综上!

(以上Win10 64系统)

 

——————————————————————— 分割线 ———————————————————————

 

Vue Devtools 安装:

点击 Vue Devtools 进入下载页面。

可下载zip包,放入本地 d盘的文档 文件夹里(您随意,爱放哪就放哪,自己找得到就行)。

星彩网app下载 20

解压到文件夹(此处,我直接设定问文件夹名和压缩包同名。)

下载好,并解压好后,打开命令行程序。

在命令行程序中输入 cd D:文档vue-devtools-master 进入工程所在文件夹。

在命令行程序中输入 cnpm install 回车,等待。

  星彩网app下载 21

 

命令行程序中输入 npm run build 回车,等待。

星彩网app下载 22

然后,打开下图目录内的 mainfest.json 文件。

星彩网app下载 23

修改 background 节点下 persistent 属性的值 为 true。

星彩网app下载 24

保存。

打开 Google Chrome。

在网址栏输入 chrome://extensions 打开扩展程序。

勾选开发者模式,并点击 ”加载已解压的拓展程序...“ 按钮。

星彩网app下载 25

选择chrome文件夹。

星彩网app下载 26

安装完成。

效果图:

星彩网app下载 27

 

本文由星彩网app下载发布于星彩网app下载,转载请注明出处:VUE搭建开采境况及营造项目,Vue安装以至Vue项目

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。