评论

Linux系统构建vue项目

在Linux中搭建vue-cli项目

一、前言

Vue.js是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。今天我们就来了解一下Vue在linux环境搭建流程。

二、Linux安装node.js

1. 下载node

  • 去官网下载和自己系统匹配的文件:

英文网址:https://nodejs.org/en/download/
中文网址:http://nodejs.cn/download/

通过  uname -a  命令查看到我的Linux系统位数是64位(备注:x86_64表示64位系统, i686 i386表示32位系统),如图:

故下载一下红色框中文件 ,版本为v10.15.3

2. 安装node

  • 下载下来的tar文件上传到服务器并且解压,然后通过建立软连接变为全局;
  1. 上传服务器可以是自己任意路径,目前我的放置路径为  cd /app/software/

  2. 解压上传(解压后的文件我这边将名字改为了nodejs,这个地方自己随意,只要在建立软连接的时候写正确就可以)
    ① tar -xvf   node-v10.15.3-linux-x64.tar.xz;   
    ② mv node-v10.15.3-linux-x64  nodejs; 
    ③ 确认一下nodejs下bin目录是否有node 和npm文件,如果有执行软连接,如果没有重新下载执行上边步骤.

  3. 建立软连接,变为全局
    ① ln -s /app/software/nodejs/bin/npm /usr/local/bin/ 
    ② ln -s /app/software/nodejs/bin/node /usr/local/bin/

  4. 最后一步检验nodejs是否已变为全局
    在Linux输入命令行node -v 命令会显示nodejs版本,如图所示为大功告成:

    (因已安装v10.14.0版本的,就不重新装v10.15.3了)

3. 安装npm
一般nodejs包中已经包含了,设置过环境变量就可以直接使用nmp命令了,在Linux输入命令行npm -v 命令会显示npm版本,如图所示:

如果nodejs包中没有包含npm,先下载:
官网地址: www.npmjs.com
淘宝地址:https://npm.taobao.org/mirrors/npm/

安装使用如下命令:  
node cli.js install npm -gf

4. 安装webpack
在Linux输入命令行 npm install webpack -g执行安装。
安装完后在Linux输入命令行npm info webpack命令会显示webpack相关信息,第一条就是版本,如图所示:

三、Linux构建vue项目

1. 安装vue-cli
在Linux输入命令行npm install -g vue-cli执行安装。

2. 建立软链接
安装vue-cli完成后要建立软链接,否则会报No command ‘vue’ found的错误。
执行命令:
ln -s /home/formularoom/env/node-v10.15.3-linux-x64/bin/vue /usr/local/bin/vue
命令语法:ln -s 源文件 目标文件。
/usr/local/bin  目录是给用户放置自己的可执行程序的地方(Linux),避免系统升级而覆盖同名文件。

安装完后查看详情:执行命令npm root -g

3. 使用vue-cli创建项目

  1. 执行命令:vue init webpack lufei (lufei是项目名)
  2. 执行命令:cd lufei
  3. 执行命令:npm install
  4. 执行命令:npm run dev
  5. 浏览器打开localhost:8081

linux中搭建vue-cli项目完成

四、总结

vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

Linux系统搭建vue-cli项目,需要注意以下几点:

  1. 下载node时,确认下Linux系统是64位还是32位,下载对应系统的版本;
  2. 安装node后要建立软连接,变为全局;
  3. 安装vue-cli完成后要建立软链接,否则会报No command ‘vue’ found的错误;

五、参考资源

https://www.cnblogs.com/vae860514/p/8242669.html

最后一次编辑于  08-22  
点赞 1
收藏
评论