vue环境搭建、新建项目以及编辑器vscode安装

电玩女神 2023-03-13 13:51 171阅读 0赞

## 一、vue开发环境搭建 ##

1、安装nodejs  
步骤：在node官网(https://nodejs.org/en/download/ )选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，在cmd控制台输入`node -v`，如果出现版本信息即表示安装成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjEzOTY5_size_16_color_FFFFFF_t_70]  
2、npm包管理器是集成在node中的，所以直接输入`npm -v` 就能查看到版本信息，若出现版本信息则表示npm能正常使用。

3、输入`npm install -g cnpm --registry=http://registry.npm.taobao.org` ，通过淘宝镜像安装相关依赖。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjEzOTY5_size_16_color_FFFFFF_t_70 1]  
4、安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli ，安装完成即可。

## 二、新建vue项目 ##

1、进入到vue项目要放置的路径下（例如desktop），新建vue项目，指令 `vue init webpack +项目名称.`  
例如:执行指令 `vue init webpack firstvue` ,则会在当前(desktop)路径下创建一个名为firstvue的文件夹，这个文件夹就是新建的vue项目，执行上述命令后，这个项目的相关文件都会在firstvue这个文件夹下自动生成。

2、上一步之后就会开始新建项目，询问项目的相关配置。一路yes省事儿没啥问题

3、进入到项目的文件夹(firstvue)下，

$ \desktop> cd firstvue
        $ \desktop\firstvue>

4、运行项目，指令 npm run dev ,正常情况下会输出 Your application is running here: http://localhost:8081

$ \desktop\firstvue> npm run dev

5、在浏览器中打开 http://localhost:8081，能看到vue的大logo图片。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjEzOTY5_size_16_color_FFFFFF_t_70 2]  
至此，vue项目新建完毕！

## 三、安装配置vscode ##

1.Visual Studio Code编辑器在Windows上安装比较简单，直接setup.exe。安装好后首次启动配置插件，插件配置必须联网，从网上下载。如下图点击左侧扩展：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjEzOTY5_size_16_color_FFFFFF_t_70 3]  
2.配置  
文件->首选项->设置

{
        
        "workbench.iconTheme": "vscode-icons",
        "editor.fontSize": 20,
        "editor.renderIndentGuides": false,
        "files.autoSave": "afterDelay",
        "liveSassCompile.settings.formats":[
            {
        
                "format": "expanded",
                "extensionName": ".css",
                "savePath": "/css"
            },
            {
        
                "extensionName": ".min.css",
                "format": "compressed",
                "savePath": "/css"
            }
        ],
        "liveSassCompile.settings.excludeList": [
           "**/node_modules/**",
           ".vscode/**"
        ],
        "liveSassCompile.settings.generateMap": true,
        "easysass.formats": [
            {
        
                "format": "expanded",
                "extension": ".css"
            },
            {
        
                "format": "compressed",
                "extension": ".min.css"
            }
        ],
        "easysass.targetDir": "./css/",
        "background.customImages": [
            "file:///D://222.png"
        ],
        "background.useDefault": false,
        "background.style": {
        
            "content": "''",
            "pointer-events": "none",
            "position": "absolute",
            "z-index": "99999",
            "width": "102%",
            "height": "100%",
            "background-position": "0%",
            "background-repeat": "no-repeat",
            "opacity": 0.3
        },
        "editor.quickSuggestions": {
        
            "strings": true
        },
        "cssrem.rootFontSize": 12,
        "cssrem.autoRemovePrefixZero": false,
        "cssrem.fixedDigits": 3,
        "beautify.language": {
        
            "js": {
        
                "type": [
                    "javascript",
                    "json"
                ],
                "filename": [
                    ".jshintrc",
                    ".jsbeautify"
                ]
            },
            "css": [
                "css",
                "scss"
            ],
            "html": [
                "htm",
                "vue",
                "html"
                
            ]
        },
        "workbench.colorTheme": "Dark-Dracula",
        "vetur.format.defaultFormatter.html": "js-beautify-html"
        // "emmet.syntaxProfiles":{
        
        //     "vue-html":"html",
        //     "vue":"html"
        // },
        // "files.associations": {
        
        //     "*.vue":"html"
        // },
        // "eslint.validate":["javascript","javascriptreact","html"]
    }

![在这里插入图片描述][20200514123709507.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjEzOTY5_size_16_color_FFFFFF_t_70]: /images/20230312/ce24bc393f83495f89b15fb5fc7e58c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjEzOTY5_size_16_color_FFFFFF_t_70 1]: /images/20230312/dc7d9eefe05b4c58840211947e218924.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjEzOTY5_size_16_color_FFFFFF_t_70 2]: /images/20230312/ba394f4b3725463980227e7250a198f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjEzOTY5_size_16_color_FFFFFF_t_70 3]: /images/20230312/6c50a0f5179d4b5bbd41c740f5a7dac2.png
[20200514123709507.gif]: /images/20230312/67c0fa66379644ec872885ee3b97ae38.png