VUE项目建立、编辑、调试、打包

最新推荐文章于 2024-07-16 16:20:26 发布

大恒大

最新推荐文章于 2024-07-16 16:20:26 发布

阅读量1k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/kindmb/article/details/103077180

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

安装VUE

当然还是无敌的NPM包管理器上场：

npm install vue -g

vue_cli是一个辅助工具，建立VUE项目框架的

npm install vue-cli -g

建立项目目录vue-project，在此目录下打开命令行：

vue init webpack my-project

按提示完成项目框架搭建。最终形成一个项目目录
进入目录，安装依赖项：

npm install

开始调试

npm run dev
> Listening at http://localhost:8080

用VS CODE进行项目修改

写代码是没问题，比较需要注意的是，代码格式问题

VSCODE写VUE，我常用三个插件：

vetur：负责识别VUE文件和语法以及代码格式化，js部分还是需要eslint来管
eslint：负责识别js语法，显示语法错误，比如未使用的变量，未定义的方法等，这个是专门对付Js文件用的，也有格式化功能
prettier：支持多种文件格式的格式化，可以用来负责格式化JS、HTML代码
但有个问题要注意：vscode与这3个插件，都有一个格式化代码功能，即按ctrl+alt+f时会将代码格式化。那应该用哪个要仔细协调。

首先要注意的是，按下ctrl+alt+f进行格式化，会调用哪个插件来格式化代码，取决于文件类型

在VSCODE干净安装时，打开一个JS或HTML，按格式化热键，是调用VSCODE的自有格式化功能，
如果安装了prettier，会自动注册多种格式文件的格式化功能，如果你打开一个JS文件，此时按格式化热键，会弹出提示，问你要哪种格式化规，如果你选了prettier，系统会在用户配置文件settings.json中添加：

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

如果选择vscode自有格式化功夫，就会添加：

{
    "[javascript]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    }
}

vue文件在格式化时，会弹出要你在vetur和prettier间选择一个格式化规则(vscode本身不对vue有格式化功能，所以在此不出现)。选择vetur：

 "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }

这里挺有意思，因为vetur默认使用的是它内置的prettier规则，考虑vetur可能是比纯用prettier还多了对vue语法的格式化功能，所以还是选择vetur靠谱，vue文件在vscode中没有自带格式化功能，除非你强制注册

 "[vue]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    }

最后是eslint，它的启用要在settings.json中手动打开，

"eslint.enable": true,
"eslint.autoFixOnSave": true, //保存文件时自动修复错误，不建议打开
"eslint.run": "onType",
"eslint.options": {
    "extensions": [".js",".vue"]  //监视js,vue文件
},
"eslint.validate": [
    { "language": "vue", "autoFix": true }  //autoFix什么作用还没研究
]

打开eslint以后，再打开VUE文件，就会自动分析其中的js代码了。但现在有个问题，我们刚才是用vetur管理vue文件，其用内置prettier格式化代码，现在将vue也关联给eslint，格式认知上就两个打架，比如，热键格式化后，ESLINT会报错，按ESLINT改完，一按热键就又改回去了，于是干脆就把eslint的格式化规则改为prettier，方法是将prettier与ESLINT冲突的部分改掉：

？？？？？？？？？？？？？？？？？？？？？？？？？？

空项止的.eslintrc.js文件，可以通过eslint --init来产生。

最后的问题

prettier在格式化代码时，会自动把单引号改为双引号，行末添加删除分号，函数括号左侧的空格会被干掉，这个有什么解决办法？
settings.json中添加：

 "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true,
            "semi": true  //eslint的规则是false，
        }
    }

但这样只能解决VUE文件中JS代码格式化问题。如果想解决JS文件中代码问题，再添加：

    "prettier.singleQuote": true,
    "prettier.semi": true,

函数括号左侧的空格会被干掉的解决办法：

    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",

但这样一来，VUE中的js代码就没法用prettier来规范了。采用的是vscode默认的机制，不好不好
其实这个空格不要也罢，顶多在build时出一些warning.

用VS CODE进行项目调试：

1.开启 Chrome 远程调试端口

Windows

右键点击 Chrome 的快捷方式图标，选择属性
在目标一栏，最后加上 --remote-debugging-port=9222，注意要用空格隔开

macOS

打开控制台
执行命令 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

打开控制台
执行命令 google-chrome --remote-debugging-port=9222

2.安装 Chrome Debug 插件

点击 Visual Studio Code 左侧边栏的扩展按钮，然后在搜索框输入Debugger for Chrome 并安装插件，再输入，安装完成后点击 reload 重启。

3.创建 Debug 配置文件

点击 Visual Studio Code 左侧边栏的调试按钮，在弹出的调试配置窗口中点击设置小齿轮，然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录，里面会有一个 lanch.json 文件并会自动打开

用下面的配置文件覆盖自动生成的 lanch.json 文件内容。

注意：URL中的端口号要跟WEBPACK配置的启动端口号一致。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "webRoot": "${workspaceRoot}/src",
        "url": "http://localhost:8080/#/",　
        "sourceMaps": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      }
    ]
  }