vue项目搭建

vue安装/搭建项目

搭建项目步骤

1. 安装 Vue 脚手架

2. 通过 Vue 脚手架创建项目

3. 配置 Vue 路由

4. 配置 Element-UI 组件库

5. 配置 axios 库

6. 安装less

7. 适配

1. 开发准备

1.1 登录界面

https://www.bilibili.com/video/BV1jv411t7oV/

1.2 伸缩式导航栏

https://www.bilibili.com/video/BV17f4y1y7QH/

1.3 时钟

time.html

https://isluo.com/work/vue-flip-down/

1.4 天气

心知天气、天气网、和风天气

https://blog.csdn.net/showapi/article/details/127771217

• http://www.tianqiapi.com/index/plugin

• https://www.tianqi.com/plugin/list

  • 设置：https://www.tianqi.com/plugin/styleset?id=6

  <iframe width="320" height="85" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=6&py=chongqing&icon=1"></iframe>
  
  <iframe width="320" height="85" src="https://i.tianqi.com/?c=code&a=getcode&id=6&py=chongqing&icon=1" frameborder="0"></iframe>
  

• 和风天气官网(收费): https://widget.qweather.com/

• https://www.sojson.com/api/weather.html

• https://market.aliyun.com/products/57096001/cmapi010812.html#sku=yuncode481200005

• http://t.weather.sojson.com/api/weather/city/101010100

说明

http://t.weather.sojson.com/api/weather/city/101010100

101010100表示的市城市编码，可以对照 全国城市编码 进行查找相应城市，不过这个只能查询未来几天的天气

"date": "20",
"high": "高温 28℃",
"low": "低温 17℃",
"ymd": "2023-05-20",
"week": "星期六",
"sunrise": "04:55",
"sunset": "19:26",
"aqi": 77,
"fx": "西北风",
"fl": "4级",
"type": "阴",
"notice": "不要被阴云遮挡住好心情"

2. 搭建环境

需要安装 NodeJS

通过cmd 命令下 npm -v来测试 是否安装成功

通过npm 来安装 vue

2.1.安装Nodejs 环境

如果npm下载非常慢：

# 使用淘宝 npm 地址
npm config set registry https://registry.npm.taobao.org

# 配置后可通过下面方式来验证是否成功
npm config get registry   或   npm info expres

2.2.Vue环境搭建

• 在命令行通过安装vue: npm install –g vue
• 安装vue脚手架: npm install -g @vue/cli
• 测试是否安装成功: vue --version
• 卸载
  • 2.x:npm uninstall -g vue-cli
  • 3.x:npm uninstall -g @vue/cli

2.3. 其他

卸载

• 2.x:npm uninstall -g vue-cli
• 3.x:npm uninstall -g @vue/cli

vue CLI安装

这里是安装Vue CLI 不是创建项目

版本历史：https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.x安装npm install -g vue-cli

3.x以上安装npm install -g @vue/cli

指定版本npm install -g @vue/cli@4.5.18

检查

vue --version
# OR
vue -V

升级

如需升级全局的 Vue CLI 包，请运行：

小版本更新，不会 由 3.x 变为 4.x

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

项目依赖

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

3. 创建项目

E:\202106淘宝前端--web前端开发视频教程\【20】Vue实战项目：电商管理系统（Element-UI）\day01-项目初始化登录功能开发\05.项目初始化_.mp4

创建一个名为hello-world的项目

• 方式一： vue create

  vue create hello-world

• 方式二： vue ui 打开图形化界面 创建

  cmd --> 执行 vue ui 注意盘符不能修改，

  如果想自定义文件位置，可以先打开指定文件夹下然后 cmd 执行 vue ui

image-20230509101801058

image-20220919230503863

• 安装 Element UI 组件

  安装

  https://blog.csdn.net/interest_ing_/article/details/125942652

  npm install element-ui --save-dev
  # 或者
  npm i element-ui -S
  

  

  image-20220921214752541

  vue3添加

import installElementPlus from './plugins/element'

const app = createApp(App);
installElementPlus(app)
app.use(store).use(router).mount('#app')

• 配置axios

  点击 依赖--> 安装依赖--> 运行依赖，搜索axios

  

  image-20220921215224382

• 安装less

点击 依赖--> 安装依赖，选择 开发依赖 搜索 less

需要 安装 less 和less-loader

image-20220921234257782

npm install -D less less-loader@7.3.0

4. 启动项目

• 在项目根目录通过npm run serve来启动创建的示例程序；

• 在浏览器通过地址localhost:8080来 测试访问。

5. 项目结构说明

image-20221203143128720

创建 vue.config.js

module.exports = {
  devServer: {
    disableHostCheck: false,
    host: '127.0.0.1',
    port: 8082,
    https: false,
    hotOnly: false,
    proxy: null,
    // 自动打开浏览器
    open: true
  }
}

6. Vue路由配置

在项目根目录通过命令npm install vue-router –save-dev安装路由模块；

• 通过代码配置路由；

• 新建两个新组件，给新组件配置路由<router-link>和<router-view>标签的使用；

路由重定向

const routes = [
  { path: '/', redirect: '/login' }, // 重定向到 login 请求
  { path: '/login', component: Login }
]

7. vue使用rem实现 屏幕适配

vue实现大屏适配方案

https://www.jb51.net/article/265003.htm#_label2

https://blog.csdn.net/u011200562/article/details/115549134

https://blog.csdn.net/IT_iosers/article/details/113243449

https://blog.csdn.net/Landlord_cat/article/details/107227665

https://blog.csdn.net/weixin_41257563/article/details/97266234/

8. .env

.env & .env.development & .env.production的配置

主要用来配置一些公共参数，和请求的前缀（用于axios中的axios.defaults.baseURL）

不用 axios.defaults.baseURL = process.env.VUE_APP_BASE_API 直接在vue.config.js 中设置代理的方式作为 baseURL 也可以 （待定，目前还不理解）

说明： 目前访问后端接口，目前接触的有4种方式

• 第一种是通过Nginx（可以代理，负载均衡）这样配置baseURL 是没有必要设置ip的，只需要指定好 nginx配置好的 请求路径 例如 axios.defaults.baseURL = '/SDT_IMOA/a'
• 第二种通过 tomcat，和第一种类似（待整理）
• 第三种，直接访问后端的 网关服务，列如目前app端配置的ip既是网关的访问ip:端口
• 第四种，通过Node,部署 Node服务

8.1 说明：

• .env: 全局默认的配置文件，不管什么环境都会加载这个文件
• .env.development:开发环境下的配置文件
  • 执行npm run serve:会加载.env.development，但是呢，会先加载.env，再加载.env.development，如果两个文件有同一个项，后加载的就会覆盖掉第一个先加载的，如NODE_DEV
• .env.production:生产环境下的配置文件
  • 执行 npm run build会加载.env.production
• process.env.NODE_ENV默认只有两种状态即development和production。
• NODE_ENV是一个用户自定义的变量，在webpack中它的用途是判断生产环境或开发环境。
• 注意：属性名必须以VUE_APP开头，比如VUEP_APP_XXX
• 直接调用process.env属性（全局属性，任何地方都可以使用）
  • 注：.html 类型文件可通过 '<%= process.env.VUE_APP_ENV %>' 方式拿到 VUE_APP_ENV
  • ${process.env.VUE_APP_SUB_PATH}

img

8.2 自定义环境

第一步：创建.env.test文件

第二部：配置环境及地址

参数 不要加上引号

不知道啥情况，使用 NODE_ENV=test可能会导致编译失败，所有如果失败 在使用 NODE_ENV=development

# 测试环境
NODE_ENV=development
VUE_APP_ENV=test  // 自定义环境变量，注：必须以VUE_APP_开头
#请求接地址
VUE_APP_BASE_API = http://xxxxx 

第三步：配置package.json

"scripts": {
    "serve": "vue-cli-service serve", // 开发环境脚本,不指明 mode 默认执行 .env.development 文件
    "build:test": "vue-cli-service build --mode test", // 测试环境打包脚本，执行 .env.test 文件
    "build:prod": "vue-cli-service build --mode production", // 正式环境打包脚本，执行 .env.production 文件 不指明 mode 默认执行也行
  }

第四步：配置完成，使用命令npm run test 即可以打包test环境的包。

8.3 说明

• env 配置文件中，参数不要加 引号，同时不能加注释 ，否则会出现下面的情况

{
    "NODE_ENV": "'development'\t// webpack自带环境变量",
    "VUE_APP_BASE_API": "http://192.168.3.30:9700/",
    "VUE_APP_ENV": "'development' // 自定义环境变量，注：必须以VUE_APP_开头",
    "BASE_URL": "/"
}

• 用 # 添加注释

8.4 其他

.env 定义的变量在 html 中使用

<% if (process.env.VUE_APP_SYSTEM === 'OA') { %>
  <script type="text/javascript" src="http://192.168.2.156:9705/pageoffice.js"></script>
<% } %>

js 中使用

if(process.env.VUE_APP_USE_PAGEOFFICE=='true'){
  const script = document.createElement('script');
  script.src = 'http://192.168.2.156:9705/pageoffice.js';
  document.head.appendChild(script);
}

9. axios

axios

其他

vue.config.js

vue3 创建时没有 生成 vue.config.js 文件,需要手动添加

module.exports = {
  devServer: {
    disableHostCheck: false,
    host: '127.0.0.1',
    port: 8082,
    https: false,
    hotOnly: false,
    proxy: null,
    // 自动打开浏览器
    open: true
  }
}

publicPath 用于 应用被部署在一个子路径 上

使用场景-案例：

协调办公： http://192.168.6.203:18187/SDT_IMOA/a/login

大屏服务：http://192.168.6.203:18187/SDT_IMOA/electric （部署在 协同办公子路径上 ）

需要设置 publicPath: './' 或者 publicPath: '/SDT_IMOA/electric'

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.semdo.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.semdo.vip/admin/，则设置 baseUrl 为 /admin/。
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0',
    port: port,
    sockHost: 'http://127.0.0.1:1024',
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.3.30:9700`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  /** 自适应将scss 中px转rem*/
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 192
          })
        ]
      }
    }
  },
}

eslint配置

.eslintrc.js 文件 rules 进行修改,不建议关闭

eslint配置

.prettierrc

{
    "semi":false;
    "singleQuote":true
}

忽略文件 .gitignore

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

jsconfig.json

项目无法跳转带有 @ 的路径

jsconfig.json

• "target": "es5"：指定将 JavaScript 编译为 ES5 标准的代码。

• "module": "esnext"：指定使用 ES 模块的语法。

• "baseUrl": "./"：指定项目中模块导入的基础路径为当前目录。

• "moduleResolution": "node"：指定在解析模块时采用 Node.js 的解析策略。

• "paths": { "@/*": ["src/*"] }：定义路径别名，允许使用 "@/" 来代替 "src/"。

• "lib": ["esnext", "dom", "dom.iterable", "scripthost"]：指定项目中可用的库类型。

• "exclude": ["node_modules", "dist", "build"]：排除指定的目录或文件，不参与编译。