更新ubuntu软件源
sudo apt-get update
sudo apt-get install -y python-software-properties software-properties-common
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
apt-get install nodejs
npm install -g vue-cli
Or 编译安装
1.1 下载 nodejs
wget https://nodejs.org/dist/v16.13.1/node-v16.13.1-linux-x64.tar.xz
tar xvf node-v16.13.1-linux-x64.tar.xz
mv node-v16.13.1-linux-x64 /usr/local/nodejs
1.2、配置环境变量
node.js安装成功后，在/etc/profile下配置node.js的环境变量，具体如下：
#node.js的环境
export PATH=/usr/local/nodejs/bin:$PATH
环境变量配置成功后，可以输入如下进行验证，具体如下：
[root@centos-master ~]# node -v
v16.13.1
[root@centos-master ~]# npm -v
8.3.0
1.3、安装cnpm
下来安装cnpm，通过cnpm来安装vue，具体安装的命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
#执行如上的命令后，输出的信息结果信息如下
whoami
npm <cmd> -h quick help on <cmd>
npm -l display full usage info
npm faq commonly asked questions
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
/root/.cnpmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
下来验证cnpm是否安装好，验证具体如下：
[root@centos-master ~]# cnpm -v
[email protected] (/usr/local/nodejs/lib/node_modules/cnpm/lib/parse_argv.js)
[email protected] (/usr/local/nodejs/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
[email protected] (/usr/local/nodejs/bin/node)
[email protected] (/usr/local/nodejs/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local/nodejs
linux x64 4.18.0-348.7.1.el8_5.x86_64
1.4、安装vue
cnpm install -g vue-cli
说明：
- Vue build ==> 打包方式，回车即可；
- Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
- Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车（建议Y）；
- Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
- Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
进入项目：cd vue-demo目录下、 npm run dev，启动项目
1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
https://www.cnblogs.com/ljstudy/p/14643641.html
https://www.cnblogs.com/weke/p/15778802.html
没有评论