CentOS7.6 Web项目搭建与测试
CentOS7.6 Web项目搭建与测试
CentOS7.6安装Nodejs(Npm)
第一步：软件下载安装
进行安装目录：cd /opt/software (如果目录不存在，请先创建目录)
下载二进制包：
wget https://nodejs.org/dist/v10.15.1/node-v10.15.1-linux-x64.tar.xz
(下载地址去官网查询最新的，wget命令如果不存在，请先安装wget：yum install -y wget)
解压：
tar xvJf node-v10.15.1-linux-x64.tar.xz
删除二进制包：
rm -rf node-v10.15.1-linux-x64.tar.xz
文件夹更名：
如果不更换文件夹名是 node-v13.5.0-linux-x64，太长了所以就换成 node
[root@VM_0_14_centos home]# mv ./node-v13.5.0-linux-x64 ./node
[root@VM_0_14_centos home]# ls
node node-v13.5.0-linux-x64.tar.xz
[root@VM_0_14_centos home]# ls ./node
bin CHANGELOG.md include lib LICENSE README.md share
文件夹拷贝
[root@VM_0_14_centos home]# cp -r ./node /usr/local/node
[root@VM_0_14_centos home]# ls /usr/local/node
bin CHANGELOG.md include lib LICENSE README.md share
[root@VM_0_14_centos home]#
第二步：配置环境变量
编辑环境变量文件：vi /etc/profile，添加内容如下：
export NODE_HOME=/usr/local/node
export PATH=$PATH:${NODE_HOME}/bin
:wq
第三步：保存环境变量
source /etc/profile
下面命令检查一下：
[root@VM_0_14_centos home]# echo NODE_HOME
/usr/local/node
[root@VM_0_14_centos home]#
第四步：检查安装版本
node -v
npm -v
[root@VM_0_14_centos home]# node -v
v13.5.0
[root@VM_0_14_centos home]# npm -v
6.13.4
[root@VM_0_14_centos home]#
CentOS7.6 Web项目搭建与测试
第1步：进入apache服务器根目录：
cd /var/www/html/
第2步：安装cnpm，设置npm淘宝镜像
#npm install -g cnpm --registry=https://registry.npm.taobao.org
#npm config set registry http://registry.npm.taobao.org
第3步：全局安装Web项目所需软件包
cnpm install yarn -g
cnpm install [email protected] [email protected] -g
cnpm install [email protected] [email protected] -g
cnpm install -g npmlist
第4步：检查全局安装的软件包
[root@VM_0_14_centos html]# npmlist
Installed npm packages: (global)
cnpm..............................[6.1.1]
npm..............................[6.13.4]
npmlist...........................[3.1.2]
vue..............................[2.6.11]
vue-cli...........................[2.9.6]
UNMET PEER DEPENDENCY webpack....[3.12.0]
webpack-cli.......................[2.1.5]
yarn.............................[1.21.1]
[root@VM_0_14_centos html]#
第5步：创建Web项目
cd /var/www/html/
vue init webpack-simple myweb
（注意：? Use sass? No;）
cd myweb
npm install
安装Web项目本地所需软件包（会安装到node_modules文件夹）
npm install [email protected] vue-loader vuex vue-router axios vee-validate qs vue-i18n element element-ui --save
npm install [email protected] style-loader file-loader url-loader echarts --save
检查本地软件包安装
[root@VM_0_14_centos myweb]# npm ls --depth 0
[email protected] /var/www/html/myweb
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
└── [email protected]
npm ERR! peer dep missing: webpack@^4.0.0 || ^5.0.0, required by [email protected]
npm ERR! peer dep missing: webpack@^4.0.0 || ^5.0.0, required by [email protected]
[root@VM_0_14_centos myweb]#
第6步：完成以下3处修改
[root@VM_0_14_centos myweb]# ls
index.html node_modules package.json package-lock.json README.md src webpack.config.js
第1处：修改index.html
vi index.html
<script src="/dist/build.js"></script>
//改为：
<script src="./dist/build.js"></script>
第2处：修改webpack.config.js
//原：
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
//改为：
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/myweb/dist/',
filename: 'build.js'
},
第3处：修改webpack.config.js
//增加：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
//改为：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
}$
第4处：修改webpack.config.js
//原：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
//改为：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src')
},
使用cross-env解决跨平台设置NODE_ENV的问题
使用方法：
安装across-env:
npm install cross-env --save-dev
在NODE_ENV=xxxxxxx前面添加cross-env就可以了。
set NODE_ENV=development && webpack --config webpack.config.dev.js也可以实现一样的效果
参考链接：使用cross-env解决跨平台设置NODE_ENV的问题
第7步：Web项目打包
npm run build
浏览器输入 http://你的ip地址/myweb/ 即可测试！
效果图：
Vue项目中 ES6 JS 的 export 与 import
在src文件夹下创建comon目录，在comon中创建test01.js文件
操作如下：
[root@VM_0_14_centos myweb]# cd src
[root@VM_0_14_centos src]# ls
App.vue assets main.js
[root@VM_0_14_centos src]# mkdir common
[root@VM_0_14_centos src]# cd common
[root@VM_0_14_centos common]# vi test01.js
测试目的：我们要在/myweb/src/App.vue的JavaScript中导入并应用/myweb/src/common/test01.js中定义的函数
第1步：编辑完成 /myweb/src/common/test01.js
在test01.js中填入如下内容：
function add(a,b){
return a+b;
}
function addM(a,b){
return a+b;
}
export {add,addM};
第2步：在App.vue中，导入 /myweb/src/common/test01.js，并使用test01.js中导出(export)的函数
[root@VM_0_14_centos src]# vi App.vue
import {add} from '@/common/test01.js' // ==> /myweb/src/common/test01.js
console.log(add(3,8));
第3步：修改webpack.config.js
//原：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
//改为：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src')
},
第4步：打开浏览器输入网址
http://你的ip地址/myweb/
查看开发者工具-》控制台: 输出：11 则测试成功！