CentOS7.6上安装Vue的步骤 并初步显示HelloWorld

----- 下载安装过程和方法 -----
1.下载安装node和nmp(比如下载到/root/baoxw/Vue/下)
  # wget https://nodejs.org/dist/v11.10.0/node-v14.5.0-linux-x64.tar.xz --no-check-certificate
  或者  
  # wget https://npm.taobao.org/mirrors/node/v14.5.0/node-v14.5.0-linux-x64.tar.gz --no-check-certificate

2.把下载后的tar包进行解压

3.把下载后的bin文件创建符号链接
  # ln -s /root/baoxw/Vue/node-v14.5.0-linux-x64/bin/node /usr/bin/node
  # node -v
    v14.5.0
  # ln -s /root/baoxw/Vue/node-v14.5.0-linux-x64/bin/npm /usr/bin/npm
  # npm -v
    6.14.5

4.这个好像可以不用做
  # npm install cnpm -g
  # ln -s /root/baoxw/Vue/node-v14.5.0-linux-x64/lib/node_modules/cnpm/bin/cnpm /usr/bin/cnmp

5.npm安装vue
  # npm install -g vue
  # npm install -g vue-cli

6.vue创建符号连接
  # ln -s /root/baoxw/Vue/node-v14.5.0-linux-x64/bin/vue /usr/bin/vue
  # vue -V
    2.9.6
  # ln -s /root/baoxw/Vue/node-v14.5.0-linux-x64/bin/vue-init /usr/bin/vue-init
  # ln -s /root/baoxw/Vue/node-v14.5.0-linux-x64/bin/vue-list /usr/bin/vue-list

----- 创建工程和实际遇到的问题并解决 -----
1.创建第一个工程
  # vue create helloworld
  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:

  npm uninstall -g vue-cli
  npm install -g @vue/cli

2.根据以上提示,卸载低版本vue-cli,安装高版本vue-cli
  # npm uninstall -g vue-cli
  # npm install -g @vue/cli

3.再次创建工程
  # vue create helloworld
  这个过程需要几分钟时间。直到终端打出如下:
  🎉  Successfully created project helloworld. 
  👉  Get started with the following commands:

    $ cd helloworld
    $ npm run serve

4.# cd helloworld
  # npm run serve
  终端打出
 App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.17.9.19:8080/ 

5.# vi helloworld/src/App.vue 
  修改这一行:
  <HelloWorld msg="Hello World ,我的第一个工程"/>
  保存成功后,打开 http://172.17.9.19:8080/ 可以看到MSG的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值