node、npm、vue安装 -- VUE 项目 demo 实例

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

1. 安装node:

sudo yum install epel-release
sudo yum install nodejs
node --version  // 安装好后查看版本

2. 安装 npm 和 express:

 sudo yum install npm --enablerepo=epelsudo npm install -g expresssudo npm install -g express-generatornpm -v // 安装好后 查看版本

注意:有时安装成功后,需要关闭xshell,重新启动。npm才会生效。

3.安装 cnpm:

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

 4.安装脚手架 vue-cli :

npm install -g vue-cli vue -v // 安装好后 查看版本

5. 用 vue-cli 构建项目 (windows 和 linux 都可以按此方法构建

选择一个确定目录 D:\node, 作为项目存放目录。

切换到该目录下,执行命令行命令:

 vue init webpack firstApp // 自动构建一个完整项目

会有一些选项要求选择设置: 

 选项说明:(如果只是测试项目,可以一直按回车)

Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitestProject description:项目描述,默认为A Vue.js project,直接回车,不用编写。Author:作者,如果你有配置git的作者,他会读取。Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择YUse ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我这里不需要,所以输入n。Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我这里不需要,所以输入n

创建成功如下图:(在finished 上面可能会有多行红色 error 信息,不用关注,无影响。)

这时应该在路径 D:\node下已经生成项目:firstApp ,结构如下 

(在这一步还没有文件夹:node_modules,后面才会生成。)

项目结构说明:

build:最终发布的代码的存放位置。config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。node_modules:npm 加载的项目所需要的各种依赖模块。src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:assets:放置一些图片,如logo等components:目录里放的是一个个的组件文件router/index.js:配置路由的地方App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,面的<router-view/>必不可少。main.js :项目的核心文件(整个项目的入口)引入依赖包、默认页面样式等。static:静态资源目录,如图片、字体等。test:初始测试目录,可删除.XXXX文件:配置文件。index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。README.md:项目的说明文件。webpack.config.js:webpack的配置文件,把.vue的文件打包成浏览器能读懂的文件。.babelrc:是检测es6语法的文件的配置.getignore:忽略文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置).postcssrc.js:前缀的配置 

cd 到项目路径下,执行加载 jar 包的命令:

cnpm install 

此后,项目会多一个 node_modules 文件夹,里面是依赖包资源。

6. 运行项目

npm run dev
// 或者:
npm run start

运行成功:

7. 浏览器中访问:localhost:8080

到此Demo 已经正常运行了。

 

附加说明:

8. 把项导入 VSCode 

main.js 是整个项目的主入口:(此页面代码固定,可以永远不修改。)

9. 配置路由

index.js中配置路由,import是引用哪个 vue 文件,routes 是多个路由设置。

如下图, HelloWorld 和 test  分别是 2 个 vue 文件。

10. 简单修改代码

不用手动刷新浏览器,会自动刷新,如下 : 

 另:</template> 标签相当于 jsp 的<html> 标签。

就这么多,我还在学...

 

参考:https://blog.csdn.net/jiangyu1013/article/details/83855476

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用C语言实现简单的停车场管理

这个程序是利用栈和循环队列实现的&#xff0c;自己得先处理好逻辑关系就好了。由于题目没有要求&#xff0c;这个程序就没加重复判断&#xff0c;比如一辆车已经停在车位上或者便道上&#xff0c;再来一辆就判断不了了。关于栈&#xff0c;就是先进后出的思想&#xff0c;队列…

推荐一个配置linux服务的网站

该网站的各种linux服务的配置都是基于CentOS系统的 基本上各种linux服务都有了 http://www.server-world.info/en/转载于:https://www.cnblogs.com/Skyar/p/3582389.html

mariadb数据库增删改查

1.常用数据类型 1&#xff09;整数:int, bit 2&#xff09;小数:decimal    #decimal(5,2)表示共有五位数&#xff0c;保留两位小数 3&#xff09;字符串:varchar, char   4&#xff09;日期时间:date, time, datetime 5&#xff09;枚举类型(enu…

为什么你工作努力却没有起色?

成为职场达人&#xff0c;未必要经常挑灯夜战。相反&#xff0c;注意到下面几条&#xff0c;会让你少走弯路。 1&#xff09;成长的机会永远比眼前的待遇重要——做重要的事比多拿钱重要。 我知道在水木bbs上的worklife版本&#xff0c;每天都在上演的就是比较自己的第一个o…

《 Spring 实战 》(第4版) 读书笔记 (未完结,更新中...)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Pxx 表示在书的第 xx 页。 Spring 框架的核心是 Spring 容器。 1. (P7.) 构造器注入是依赖注入的方式之一。 紧耦合&#xff1a;在 …

数据结构排序法之希尔排序法(Shell Sort)

希尔排序&#xff0c;也叫递减增量排序&#xff0c;是插入排序的一种更高效的改进版本。希尔排序是不稳定的排序算法。 希尔排序是基于插入排序的以下两点性质而提出改进方法的&#xff1a; 1、插入排序在对几乎已经排好序的数据操作时&#xff0c;效率高&#xff0c;即可以达…

Windows To Ghost系统封装之必备软件集 - 好压

好压压缩软件&#xff08;HaoZip&#xff09;是强大的压缩文件管理器&#xff0c;是完全免费的新一代压缩软件&#xff0c;相比其它压缩软件系统资源占用更少&#xff0c;有更好的兼容性&#xff0c;压缩率比较高。 它提供了对ZIP、7Z和TAR文件的完整支持&#xff0c;能解压RAR…

js 弹窗并定时关闭

1. $(input).click(function() {prompt(点击成功, 2000) })function prompt(newName, time, fn) {var $div $(<div></div>);$div.css({position: fixed,top: 0,left: 0,width: 100%,height: 100%,z-index: 200,background-color: rgba(0,0,0,0.4),// background-c…

数据结构排序法之插入法

插入排序是一种简单直观的排序算法。它的工作原理非常类似于我们抓扑克牌。 对于未排序数据(右手抓到的牌)&#xff0c;在已排序序列(左手已经排好序的手牌)中从后向前扫描&#xff0c;找到相应位置并插入。 插入排序在实现上&#xff0c;通常采用in-place排序&#xff08;即…

XSLT学习笔记

1. 样式声明&#xff1a;<xsl:stylesheet>或<xsl:transform> 2. XSLT常用元素&#xff1a; 2.1 <xsl:template>&#xff1a;创建模板 Match属性的作用是使模板和XML元素相关联 e.g.:<xsl:template match"\">......</xsl:template&g…

职场:人生从没有最佳时机!一个离职客服人员的领悟

每个人都有感到失落迷惘的时候。 人生用专制又霸道的方式运行着&#xff0c;每当我们心想一切尘埃落定、生活稳固的时候&#xff0c;生活总爱给我们惊喜&#xff0c;粉碎我们短暂的安逸&#xff0c;让我们不得不重新思考。 「我走对路了吗?」 「我能够赚更多钱、爬到更高的地位…

VS Code 的常用快捷键

VS Code 的常用快捷键和插件 一、vs code 的常用快捷键 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1、注释&#xff1a; a) 单行注释&#xff1a;[ctrlk,ctrlc] 或 ctrl/ b) 取消…

vue-axios interceptors

import axios from axios import cookie from js-cookie const options {baseURL: window.location.protocol process.env.BASE_API,headers: {},timeout: 20000 } const fetch axios.create(options)// request拦截器 fetch.interceptors.request.use(config > {if (coo…

数据结构排序法之鸡尾酒排序法he快速排序法

鸡尾酒排序&#xff0c;也叫定向冒泡排序&#xff0c;是冒泡排序的一种改进。此算法与冒泡排序的不同处在于从低到高然后从高到低&#xff0c;而冒泡排序则仅从低到高去比较序列里的每个元素。他可以得到比冒泡排序稍微好一点的效能。 // 两两互换 void swap (int* a, int i, …

VSCode 多开、环境对比

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 多开&#xff1a; 第一种&#xff1a;win10的开始菜单&#xff0c;在vscode图标右键选择“新开窗口”&#xff0c;这样就多了一个vscode…

前言_工作两年自我感触

17年大学毕业&#xff0c;到今天整整工作两年&#xff0c;从前端到数据分析&#xff0c;从上家公司&#xff08;简称A&#xff09;到现公司&#xff0c;想趁着今天是参加工作两年的纪念日&#xff0c;回忆过往&#xff0c;结合现状有感而发。 刚毕业的时候&#xff0c;啥都学&a…

数据结构排序法之堆排序he归并排序

堆排序&#xff08;Heapsort&#xff09;是指利用堆这种数据结构所设计的一种排序算法。堆是一个近似完全二叉树的结构&#xff0c;并同时满足堆性质&#xff1a;即子结点的键值或索引总是小于&#xff08;或者大于&#xff09;它的父节点。 堆排序的时间&#xff0c;主要由建…

超详细设置 Idea 类注释模板和方法注释模板

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 网上找了一下&#xff0c;没有很详细且正确介绍Idea配置注释模板的&#xff0c;于是结合多篇文章自己琢磨整理出如下。 设置类注释模板…

手动创建两个文本文件text1.txt和text2.txt,按要求创建text3.txt

实现在text1.txt和text2.txt文件中除去首行和末尾对应的数据&#xff0c;要求三个文本内容如下&#xff1a; text1 text2 text3begin begin begin10 11 12 15 16 17 …

感情

团结 共患难的感情转载于:https://www.cnblogs.com/yyjh/p/11139749.html