选择

  • 文件—->首选项—->用户片段

image.png

image.png

  1. {
  2.     "vue html": {
  3.       //模板名称
  4.        "scope": "html",
  5.       "prefix": "vuehtml", //触发条件
  6.       "body": [
  7.         //内容
  8.         "<!--",
  9.         "* @description ${1:参数1}",
  10.         "* @fileName ${TM_FILENAME_BASE}",
  11.         "* @author userName",
  12.         "* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
  13.         "* @version V1.0.0",
  14.         "!-->",
  15.         "<!DOCTYPE html>",
  16.         "<html lang=\"zh-CN\">\n",
  17.         "<head>",
  18.         "\t<meta charset=\"UTF-8\">",
  19.         "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
  20.         "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  21.         "\t<title>${TM_FILENAME_BASE}</title>",
  22.         "\t<script src=\"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js\"></script>",
  23.         "</head>\n",
  24.         "<body>",
  25.         "\t<div id=\"app\"><h2>{{message}}</h2></div>\n",
  26.         "\t<script>",
  27.         "\t\tvar vm = new Vue({",
  28.         "\t\t\tel: '#app',",
  29.         "\t\t\tdata() {",
  30.         "\t\t\t\treturn {",
  31.         "\t\t\t\t\tmessage:'Hello Vue'",
  32.         "\t\t\t\t}",
  33.         "\t\t\t},",
  34.         "\t\t\tcreated(){ // 实例被创建之后执行代码",
  35.         "",
  36.         "\t\t\t},",
  37.         "\t\t\tcomputed: { // 计算属性",
  38.         "",
  39.         "\t\t\t},",
  40.         "\t\t\tcomponents: { // 组件的引用",
  41.         "",
  42.         "\t\t\t},",
  43.         "\t\t\tmethods: { // 方法",
  44.         "",
  45.         "\t\t\t},",
  46.         "\t\t\tmounted()\t{ // 页面进入时加载内容",
  47.         "",
  48.         "\t\t\t},",
  49.         "\t\t\twatch: { // 监测变化",
  50.         "",
  51.         "\t\t\t}",
  52.         "\t\t});",
  53.         "",
  54.         "\t</script>",
  55.         "</body>\n",
  56.         "</html>"
  57.       ],
  58.       "description": "快速创建在html5编写的vue模板" //描述
  59.     }
  60.   }

前端的调试用： debugger

nodejs

  • nodejs是运行在服务端的JavaScript，不需要浏览器，直接使用nodejs运行JavaScript代码
  • 模拟服务器效果，比如 tomcat

npm具体的操作

1.npm项目的初始化项目：

使用命令： npm init （-y 使用默认）
项目初始化之后，生成文件 package.json，类似于后端pom.xml文件
image.png

2.npm下载js依赖
  • 命令npm install 依赖名称

输入npm install jquery
image.png
image.png

操作中的报错：
image.png
解决：
1. 先清除掉以前的代理设置

  1. npm config set proxy null
  2. npm config set https-proxy null

也可以先通过以下代码查看代理设置，如果返回null那就不需要清理。

  1. npm config get proxy
  2. npm config get https-proxy
  1. 重新设置 ```javascript npm config registry http://registry.cnpmjs.org/
  1. <a name="GkThE"></a>
  2. ##### 3.根据package.json文件下载依赖
  4. - 使用命令：  npm install
  6. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/2673847/1640059118489-75cdcd94-4034-4316-bea3-efca9ee7e2e0.png#clientId=u20e73eea-d445-4&from=paste&height=347&id=u4d2d92d8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=347&originWidth=345&originalType=binary&ratio=1&size=20768&status=done&style=none&taskId=u6be46e38-e79d-4cff-8ee4-148e967f28d&width=345)
  8. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/2673847/1640067267532-70777b10-376d-46b8-861c-f1959ea2750b.png#clientId=u09189e43-71e9-4&from=paste&height=216&id=u1aa9b426&margin=%5Bobject%20Object%5D&name=image.png&originHeight=216&originWidth=591&originalType=binary&ratio=1&size=64076&status=done&style=none&taskId=u15ac14e2-c742-4ba3-b8ba-18e0caf478a&width=591)
  9. <a name="EdKpx"></a>
  10. ##### 安装Babel提供babel-cli工具，用于命令行转码 （es6 代码转换为es5）
  11. 第一步：
  12. ```javascript
  13. npm install --global babel-cli
  15. #查看是否安装成功
  16. babel  -version

第二步：
创建babel配置文件

{
  "presets":["es2015"]
  "plugins":[]

}

第三步:
创建js文件，编写es6代码

let input = [1,2,3]
input = input.map(item => item+1)
console.log(input)

第四步：

npm install --save-dev  babel-preset-es2015

第五步：
使用命令进行转码
1)根据文件转码
2）根据文件夹转码
image.png

模块化
  • 开发后端接口时候，开发controller service mapper ，comtoller注入service，service注入mapper在后端中，类与类之间成为后端模块化操作
  • 前端模块化在前端中，js与js之间调用成为前端模块化操作

webpack

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
Webpack可以将多中静态资源js、css、less转换成一个静态文件，减少了页面的请求

  • 安装全局webpack

    npm install -g webpack webpack-cli

  • 安装后查看版本

    webpack -v

    image.png
    image.png

  • 打包css

image.png
image.png

B2c模式

管理员———》后台管理系统
普通用户——-》前端用户系统

vue-admin-template

https://gitee.com/panjiachen/vue-admin-template

跨域的问题

通过一个地址去访问另外一个地址，这个地址中如果有三个地方任何一个不一样
就会出现跨域

访问协议   http  https
ip地址  192.168.1.1  192.168.32.2
端口号  8080  8088

ngnix配置

image.png
image.png