vue2开发环境完美搭建流程

167 阅读1分钟

vue2环境搭建步骤

1.安装 node

1.1. node官网下载,并点击安装(windows7系统最好安装node v13.X的因为最新版本安装不上。。。)

2.1. 打开命令窗口 win+R => cmd

2.1.1 node -v

2.1.2 npm -v

如果npm -v卡死 ,需要删除C:\Users\Administrator 下的.npmrc
npm -v

2.1.3 npm install vue

2.1.4 npm install vue-cli -g (安装cli2,如果安装cli3,4要用另外的命令)

2.1.5 vue init webpack "项目名称"

3.1. 开发工具vscode(visual studio code)

3.1.1 官网下载vscode,并安装

3.1.2 vue2 使用vscode 推荐安装的插件

        beautify
        npm
        svn (如果是还在用svn)
        vetur
        Vue 2 snippets
        Chinese (Simplified) 如果喜欢看中文的可以安装
        vscode-fileheader
3.1.2.1 安装插件的地方搜索svn 安装svn2.10.6
 ctrl+shift+p 搜索 svn  点击checkout 下载svn地址对应文件
 svn  底部设置-》setting  点击 搜索svn  单击settings.json 写入
    {
        "svn.path": "C://Program Files//TortoiseSVN//bin",
        "git.autofetch": true,
        "workbench.sideBar.location": "left",
        "files.autoSave": "off",
        "editor.parameterHints": true,
        "editor.quickSuggestions": { "other": true, "comments": true, "strings": true },
        "search.exclude": {        
            "**/node_modules": true,
            "**/bower_components": true,
            "build/": true,
            "temp/": true,
            "library/": true,
            "**/*.anim": true
        },
        "files.exclude": {
            "**/.DS_Store": true,
            "**/.git": true,
            "**/*.meta": true,
            "**/node_modules": true,
            "**/node_modules/": true,
            "library/": true,
            "local/": true,
            "temp/": true
        },
        "explorer.confirmDelete": false,
        "window.zoomLevel": 1,
        "svn.enableProposedApi": "none",
        "diffEditor.ignoreTrimWhitespace": false
    }
3.1.2.2 vscode-fileheader 底部设置-》setting 点击 搜索svn 单击settings.json 写入
  "fileheader.Author": "你的名字",
   "fileheader.LastModifiedBy": "你的名字",
   "fileheader.tpl": 
    "<!--\r\n * @Author: {author}  \r\n * @Description:      \r\n * @Date: {createTime}  \r\n * @LastEditors:   {lastModifiedBy}  \r\n * @LastEditTime: {updateTime} \r\n -->\r\n",

4.1. 谷歌浏览器安装vue-devtools

1.https://github.com/vuejs/vue-devtools](https://github.com/vuejs/vue-devtools)
下载不下来可以去其他的网站找已经可以用的 vue-devtools-master压缩包再继续执行下面步骤
2.安装cnpm     npm install -g cnpm -registry=https://registry.npm.taobao.org    cnpm -v   报错就要配置cnpm的path
3.到vue-devtools 目录下  cnpm install   
4.cnpm build
5.vue-devtools-master/shells/chrome/manifest.json  background中的“persistent”,改为true
6.在谷歌扩展程序中找到加载已解压的扩展程序找到指定文件夹 vue-devtools-master/shells/chrome

5.1. 如果是拿的已经有的项目代码,可以这样运行起来

删除node_module文件夹
删除pakage-lock.json文件

npm cache clean --force  清除缓存
npm config set registry https://registry.npm.taobao.org  用国内镜像
npm install --unsafe-perm=true --allow-root  --ignore-scripts 用root用户安装包