Vue安装与简单使用

最新推荐文章于 2024-08-11 23:16:38 发布

粒桃黑马

最新推荐文章于 2024-08-11 23:16:38 发布

阅读量115

点赞数

分类专栏：开发软件与环境搭建文章标签： nodejs vue npm

本文链接：https://blog.csdn.net/weixin_45697632/article/details/110629990

版权

开发软件与环境搭建专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue安装与简单使用

安装Node.js
- 环境搭建
- - 运行测试

安装Node.js

安装默认是C盘记得改路径
在这里插入图片描述

装好之后使用cmd命令查看安装好的版本:

node -v

在这里插入图片描述

环境搭建

NPM设置:

JS模块默认会放在NODE_HOME/node_moudles/目录下

npm config set prefix "E:\Work\Program Files\node-v9.5.0-win-x64\ "
npm config set cache "E:\Work\Program Files\node-v9.5.0-win-x64\cache\ "

因为npm比较慢,所以我们用国外的仓库服务器,在国内可以用淘宝开发的cnpm的镜像

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

运行测试

简单实现一个Node程序示例

//这是一个基于Node的服务器端Hello World示例
const http = require('http') //引入Node.js HTTP模块

const hostname = '127.0.0.1' //定义主机和监听的端口
const port = 9090;

const server = http.createServer((req, res) => {  //创建Http Server实例
    res.statusCode =200
    res.setHeader('Content-Type','text/plain')
    res.end('Heelo World!\n');
});

server.listen(port,hostname,()=>{  //启动监听
    console.log('服务器已启动,地址=http://${hostname}:${port}/')
})

使用cmd 找到该js下的目录

E:

E:\>cd E:\Task\sdk\Y2\Y2-Vue\WORKSPACE\ch01\NodeDemo
node nodetest.js

在这里插入图片描述

执行的效果:
在这里插入图片描述

在这里插入图片描述

创建项目模板:

首先安装Vue CLI

cnpm install -g @vue/cli@3.0.1
vue --version

用脚手架创建项目

vue create to-do-list

在这里插入图片描述

cnpm install
cnpm run serve

在这里插入图片描述

插值:

 <h2>哈喽,今天的幸运指数是:{{ number +1}}</h2>

  <h3>今天很:{{!ok ? 'YES' :'NO'}}</h3>

  <h4>今天状态如何?:{{message.split('').reverse().join('')}}</h4>

export default {
  name: "HelloWorld",
  data(){
    return{
      number :10,
      ok :false,
      message :"我要笑死啦"
    }
  },
  props: {
    msg: String
  },
};

在这里插入图片描述