目录
1.2.3.3 如果想还原npm仓库地址，只需再把地址配置成npm镜像就可以了
1.4.3 新建的wn-market-web文件夹打开cmd命令运行npm run serve
1.1 Node.js
1.1.1 简介
- Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。
1.1.2 下载
- 下载地址：Node.Js中文网
【示意图：下载Node.js】
1.1.3 安装
【示意图：安装Node.js】
【注】这里可以自定义安装地址
1.1.4 安装完成测试
- 打开windows的cmd命令，输入node -v 和 npm -v 查看版本号，显示即可
【示例】
C:\Users\Adminstrator>node -v
v18.16.0
C:\Users\Adminstrator>npm -v
9.5.1【示意图：安装完成测试】
1.2 npm淘宝镜像加速配置（可以不配置，看网速）
1.2.1 淘宝镜像官网地址
- npmmirror 中国镜像站：npmmirror 镜像站
1.2.2 单次使用
npm install --registry=https://registry.npm.taobao.org1.2.3 永久使用
1.2.3.1 配置npm使用淘宝镜像源
1、按如下方式直接在命令行设置
npm config set registry https://registry.npm.taobao.org2、也可以设置成全局的下载镜像站点，这样每次install的时候就不用加--registry，默认会从淘宝镜像下载，设置方法如下：
- 打开.npmrc文件（nodejs\node_modules\npm\npmrc，没有的话可以使用git命令行建一个( touch .npmrc)，用cmd命令建会报错）
- 增加 registry =https://registry.npm.taobao.org 即可。
1.2.3.2 验证是否成功
// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express这样，我们就可以使用淘宝镜像还不用更换成cnpm了，实际使用的都还是淘宝镜像。
1.2.3.3 如果想还原npm仓库地址，只需再把地址配置成npm镜像就可以了
npm config set registry https://registry.npmjs.org/1.2.4 使用方法
1.2.4.1 安装命令
- 使用阿里定制的 cnpm 命令行工具代替默认的 npm，输入下面代码进行安装
npm install -g cnpm --registry=https://registry.npm.taobao.org1.2.4.2 检测cnpm版本
- 检测cnpm版本，如果安装成功可以看到cnpm的基本信息
cnpm -v1.2.4.3 以后安装插件
- 以后安装插件只需要使用cnpm intall即可
cnpm install <插件名>- 假如已经习惯了npm install的安装方式，而不想去下载阿里的cnpm命令工具将命令变成cnpm怎么办？直接将node的仓库地址改成淘宝镜像的仓库地址即可
1.3 vue-cli
1.3.1 简介
- vue-cli 就是快速搭建一个 vue 项目的脚手架工具
- Vue CLI是一个官方发布vue.js项目脚手架，使用 Vue CLI 可以快速搭建 vue 开发环境，以及对应的 webpack 配置。
- CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架；
- Vue CLI是一个官方发布 vue.js 项目脚手架；
- 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。
1.3.2 安装
- windows的cmd命令行输入：npm install -g @vue/[email protected]
【cmd命令：安装vue-cli】
npm install -g @vue/[email protected]【示例】
C:\Users\Administrator>npm install -g @vue/[email protected]- 出现如下，选执行默认Default ([Vue 2] babel, eslint)，按回车键
【示例】
Vue CLI v4.5.15
┌──────────────────────────────────────────┐
│ │
│ New version available 4.5.15 → 5.0.8 │
│ Run npm i -g @vue/cli to update! │
│ │
└──────────────────────────────────────────┘
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features1.3.3 测试
- windows的cmd命令行输入：vue --version
【cmd命令：测试vue-cli】
vue --version【示例】
C:\Users\Administrator>vue --version
@vue/cli 4.5.151.4 Vue项目
1.4.1 新建项目文件夹wn-market-web
【示意图】
1.4.2 运行npm run serve报错问题解决
- 更改之前新建的文件夹wnhz-market下的package.json文件中的scripts的serve和build代码
【源代码：报错修改】
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service build",【示意图】
1.4.3 新建的wn-market-web文件夹打开cmd命令运行npm run serve
- 新建的wn-market-web文件夹打开cmd命令运行npm run serve
【示意图】
1.4.4 测试
- 浏览器输入：http://localhost:8080/
【示意图】
1.5 开始前端项目
1.5.1 基本构成
【示意图】
1.5.2 开发流程
1.5.2.1 自定义vue组件
- components文件夹下新建vue文件
- 命名规则：首字母大写.vue
【示意图】
1.5.2.2 App启用vue组件
1.6 引入elementUI
1.6.1 cdn技术
【概念图】
1.6.2 下载
- 参考 [1.4.3] 在cmd命令行输入：npm i element-ui -S
【示意图：下载elementUI】
1.6.3 使用
【示例：App.vue】
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- <Hello txt="你好啊，vue-lic"/> -->
<Login/>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Hello from './components/Hello.vue'
import Login from './components/Login.vue'
export default {
name: 'App',
components: {
// HelloWorld,
// Hello,
Login,
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>【示例：main.js】
import Vue from 'vue'
import App from './App.vue'
/* 引入ElementUI */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
/* 引入ElementUI */
Vue.use(ElementUI)
new Vue({
render: h => h(App),
}).$mount('#app')1.7 路由
1.7.1 运行机制
【概念图】
1.7.2 安装vue-router
【命令】
npm i [email protected]【示意图：安装vue-router完成查看】
1.7.3 配置router
1.7.3.1 新建文件夹src/router
【示意图】
1.7.3.2 router新建文件index.js
【示意图】
【示例：src/router/index.js】
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Show from '../components/Show.vue'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
base: '/',
routes:[
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
},
{
path: '/show',
component: Show
}
]
});
export default router;【示例：main.js】
import Vue from 'vue'
import App from './App.vue'
/* 引入ElementUI */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
/* 引入路由router */
import router from './router';
Vue.config.productionTip = false
/* 引入ElementUI */
Vue.use(ElementUI)
/* 引入路由router */
Vue.use(router)
new Vue({
render: h => h(App),
/* 调用路由router */
router,
}).$mount('#app')
【示例：App.vue】
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>1.8 配置axios
1.8.1 安装axios
【命令：安装axios】
npm i axios -S1.8.2 在文件夹src下新建文件夹utils
1.8.3 新建文件request.js并配置
【示例：src/utils/request.js】
import axios from 'axios'
const $request = axios.create({
timeout: 5000
});
$request.interceptors.request.use(
config=>{
config.headers['Content-Type']='application/json;charset=utf-8';
return config;
},error=>{
return Promise.reject(error);
}
);
export default $request;1.8.4 使用
1、在vue中导入配置
import $request from '../utils/request'2、使用$request 替代 axios