vue开发的一点心得

开发心得

学院开设了软件设计兴趣班，需要自己做网页，老师推荐得是，用vue.js框架来开发，所以就尝试了vue.js+element-ui+node.js的方式来暂时开发前端页面。

1.首先是安装node.js，因为前期的开发还是需要不借助后端跑起来的，所以采用node.js来进行测试。（此时可以在cmd里输入命令node -v来查看是否安装成功）
2.之后是安装vue.js，由于安装好node.js后，就可以使用node.js自带的npm(Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像http://npm.taobao.org/),
3,由于npm在国内使用可能会有一些资源问题，所以我们要使用cnpm, cmd下输入命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

4，安装vue脚手架，npm install -g vue-cli，（vue-cli: 用户生成Vue工程模板）

5，之后基本的开发环境就算是弄好了，现在就可以用vue-cli ,首先是找到自己想建立项目的目录（然后cmd运行命令

vue init webpack firstVue 

（webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。）

这里的意思是初始化一个项目，这个项目是基于构建工具webpack的。
6，安装依赖，进入到项目文件夹下，cmd运行命令cnpm install
然后等待安装，安装完成之后，会生成专门存储依赖包的文件加，node_modules
7，npm run dev这是运行的代码，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

然后，我们要把它配置到vscode下，这样才能方便编辑，

1，首先是安装vscode，这就是下载然后傻瓜式安装就可以了。
2，文件->首选项->设置,（如果这时打开的不是配置文件，则
点击右上角的打开设置json按钮。
之后写入配置如下：

{
    "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"]
}

到这里环境就算配的差不多了，只剩下最后一步，把element弄到项目里面，

1.进入项目文件，cmd运行cnpm i element-ui -S，等待安装，安装完成以后，引入main.js下添加
import ElementUI from 'element-ui'

Vue.use(ElementUI)

2,然后npm run dev运行起来，可能会报错，这样的话就直接把config下的index.js中的useEslint: true改为false