VS2019+node.js+vue塔项目环境练手

创建项目
vs2019 选择基本vue.js Web应用程序


脚手架什么的都自动有了。

先看下
https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

修改了下package.json对应的生成环境

“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
}
修改了下
“serve”: “vue-cli-service serve” --mode serve --copy

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

配置也可以在根目录新建一个vue.config.js ，2种方式都是可以的

//
module.exports = {
    //开发环境
    devServer: {
        //mode1:
        proxy: 'http://192.168.0.119:8888',


        //mode2:
        //port: 8888,// 端口
        //host:'192.168.0.119',//修改了hosts文件
    }
}

cmd在当前项目目录下运行 npm run serve

就会根据你给的配置进行

PS：proxy 加了端口还是会给改成8080

正常浏览了。

mode的模式：
正常传参数是
vue-cli-service serve --mode development
传的是development 、test 、production

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

我这里使用的是
“serve”: “vue-cli-service serve” --mode serve
“serve”: “vue-cli-service serve” --mode servenew

在这种模式下加载可能存在的 .env、.env.serve[servenew] 和 .env.serve[servenew].local 文件
然后根据NODE_ENV构建出对应的环境应用。

环境变量 键=值对

不要在你的应用程序中存储任何机密信息
环境变量会随着构建打包嵌入到输出代码意味着任何人都有机会能够看到它
只有 NODE_ENV、BASE_URL、以 VUE_APP_

 PS:组件、配置文件等里面写汉字会乱码
    解决方法：
    ①打开该Vue组件文件所在的文件夹
    ②用记事本打开改Vue组件的文件
    ③点击右上角的：文件 ==> 另存为UTF-8 覆盖当前

输出看看

console.log("NODE_ENV",process.env.NODE_ENV)
console.log("VUE_APP_TITLE", process.env.VUE_APP_TITLE)
console.log("VUE_APP_NODE_ENV_Remark", process.env.VUE_APP_NODE_ENV_Remark)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
您可以使用特殊注释来禁用某些警告。
使用//eslint disable next line忽略下一行。
使用/*eslint disable*/忽略文件中的所有警告。

不过就是会有异常。但是不影响页面访问。
网上说是因为 eslint 这是一个很严格语法检查工具 可以根据他给的提示去处理

1.在文件顶部加上块注释，使整个文件范围内禁止规则出现警告
<script>
/* slint-disable */
</script>

2.当前行
// eslint-disable-line
console.log("VUE_APP_TITLE", process.env.VUE_APP_TITLE) /* eslint-disable-line */
console.log("VUE_APP_NODE_ENV_Remark", process.env.VUE_APP_NODE_ENV_Remark)// eslint-disable-line

3.禁用某区域
/* eslint-disable */
alert('禁用某区域')
/* eslint-enable */

4.对指定的规则启用或禁用警告
/* eslint-disable no-alert, no-console */
alert('foo')
console.log('bar')
/* eslint-enable no-alert, no-console */

安装路由

在src目录下创建router.js，随便准备2个页面做测试

import Vue from 'vue';//Vue 核心库导人
import VueRouter from 'vue-router'
Vue.use(VueRouter)//全局注册路由组件


import App from './App.vue'
import Test from './Test.vue'

//路由是包含路径、名称和要渲染组件的对象：
const routes = [
    { path: '/', name: '主页 ', component: App } ,
    { path: '/Test', name: '测试页', component: Test } ,
]
//注册了的路由才能正常访问


//构造函数
const router = new VueRouter({
    routes,
})

//导出
export default router

在/src/components下构建一个布局页AppLayout.vue
随意整的，不好看，不完整。。。勿喷

<template>
    <div>
        <div class="hand">组件是由vue-router 插件提供的一个特殊组件，它将渲染匹配当前路由的组件。它不是一个真正的组件，因为它没有自己的模板，并且不会出现在DOM 中</div>
        <div class="main"><router-view /></div>
        <div class="foot">为了提高性能，建议在范附样式中使用class。</div>
    </div>
    
</template>

<script>

</script>

<style scoped>
    * {
        border:0px;
        margin:0px;
    }
    .hand, .foot {
        width:100%;
        height:100px;
        text-align:center;
    }

    .main {
        width: 100%;
        min-height:500px;
    }
</style>

<router-view /> 这就是通过路由来显示的位置

打开main.js

import Vue from 'vue';//Vue 核心库导人

import AppLayout from './components/AppLayout.vue'//布局页组件/页面导入
import router from './router.js'

new Vue({
    el: "#app",
    render: h => h(AppLayout)
    ,router//--------------------将路由提供给应用   这个地方很关键
});

访问试试吧
http://localhost:8080/#/

http://localhost:8080/#/Test

这个#看着有点别扭，还真有解决方案，打开router.js

//构造函数
const router = new VueRouter({
    routes,
    mode: 'history'
})

mode: 'history’
HTML5 的history.pushStateAPI ，我们可以摆脱这个＃符号，并为应用获得一个真实的URL

http://localhost:8080/
http://localhost:8080/Test

没有#都能正常访问了。加上#再去访问会直接跳到http://localhost:8080/

书上说
浏览器需要支持这个HTML5的API，这意味着它不能在Internet Explorer 9 或更低版本上工
作（所有其他主流浏览器都已经支持它一段时间了）。
服务器必须配置为当访问诸如/faq 之类的路由时发送主页而不是抛出404 错误，因为它
并不真正存在（没有名为fag.html 的文件）。这也意味着我们将不得不自己实现404 页面。

我们可以在构造器选项中使用mode 参数更改路由器模式，可以是hash （默认）、history
或abstract 。hash 模式是我们已经在使用的默认模式。这是“最安全”的选择，因为它与任何浏览器和
服务器都兼容。好吧，改回去。。。

加上菜单

<nav class="menu">
        <ul>
            <li><router-link to="App">主页</router-link></li>
            <li><router-link to="Test">测试页</router-link></li>
        </ul>
    </nav>

自由切换。。。。