Linux下Vue开发环境搭建（用npm安装node.js）

た入场券 2021-09-20 06:40 358阅读 0赞

第一步：安装node.js

[root@yang bin]# mkdir /usr/local/node         #创建node目录
     
        [root@yang bin]# cd /usr/local/node
     
        [root@yang bin]# wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64.tar.xz  
     
        [root@yang bin]# xz -d node-v8.11.2-linux-x64.tar.xz		#第一次解压
     
        [root@yang bin]# tar -xvf node-v8.11.2-linux-x64.tar   #第二次解压
     
        [root@yang bin]# ln -s /usr/local/node/node-v8.11.2-linux-x64/bin/node /usr/local/bin/node	#创建node软连接
     
        [root@yang bin]# ln -s /usr/local/node/node-v8.11.2-linux-x64/bin/npm /usr/local/bin/npm  #创建npm软连接
     
        [root@yang bin]# node -v	#验证node是否安装成功
     
        [root@yang bin]# npm -v 	#验证npm是否安装成功

![在这里插入图片描述][20190619092619192.png]  
 第二步：安装cnpm

[root@yang bin]# npm install -g cnpm --registry=https://registry.npm.taobao.org		#使用淘宝定制的 cnpm 
        
        [root@yang bin]# ln -s /usr/local/node/node-v8.11.2-linux-x64/lib/node_modules/cnpm/bin/cnpm /usr/local/bin/	#创建cnpm软连接
        
    	[root@yang bin]# cnpm -v		#验证cnpm是否安装成功

![在这里插入图片描述][20190619092423152.png]  
 第三步：升级npm

npm 版本需要大于 3.0，如果低于此版本需要升级它：
    cnpm install npm -g		#升级 npm

第四步：通过cnpm安装vue包

# 最新稳定版
    $ cnpm install vue

![在这里插入图片描述][20190619093053391.png]  
 第五步：安装命令行工具（官方提供一个命令行工具，用于快速搭建大型单页应用。）

# 全局安装 vue-cli
         [root@yang bin]# cnpm install --global vue-cli
         [root@yang bin]#  ln -s /usr/local/node/node-v8.11.2-linux-x64/lib/node_modules/vue-cli/bin/vue  /usr/local/bin/	#创建vue软连接

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]  
 第六步：创建一个vue项目

cnpm install webpack webpack-cli --save-dev		#手动安装webpack
        cnpm install webpack-dev-server@2.9.1				
        
    	     # 创建一个基于 webpack 模板的新项目
    	     [root@yang bin]# $ vue init webpack my-project
    		 # 安装并运行
    		 [root@yang bin]# cd my-project			
    		 [root@yang bin]# cnpm install
    		 [root@yang bin]# cnpm run dev
    
    		 
    修改 config/index.js 的 localhost 属性为 ‘0.0.0.0’

成功执行以上命令后本机访问 [http://localhost:8080/][http_localhost_8080] ，或其他局域网机器访问[http://你的IP地址:8080/][http_IP_8080]，可以看到浏览器输出。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]  
安装结束。

[20190619092619192.png]: /images/20210726/ad5d2cdd6e2a48ddb06ac0651886d83f.png
[20190619092423152.png]: /images/20210726/598314cf2c0c4c2c99e5babc4c60dd80.png
[20190619093053391.png]: /images/20210726/760cb15b8e354311956585303379f151.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]: /images/20210726/a1ff1035737b4d8e9e5a810f6e27d2cb.png
[http_localhost_8080]: http://localhost:8080/
[http_IP_8080]: http:
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]: /images/20210726/a11822482be8407aacc8e64910402d2f.png