Vue.JS入门下

使用npm创建项目，系统会自动生成一些列文件。

以慕课网上的Travel项目来说，在生成的项目文件中存在src文件夹，这个文件夹也是平时在做项目的时候用的比较多的，其他的一些配置信息更改的频率较低。

在src文件夹中存在App.vue文件，该文件叫做单文件组件，模板放在template标签内，行为放在script标签内，样式放在style标签内。

---

methods: {
     showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      }
    }

$nextTick:当页面上元素被重新渲染后,才会指定回掉函数中的代

在Vue项目中，执行深拷贝操作需要使用 lodash库中的cloneDeep。

在Vue项目中，富文本编译器所需要的组件叫：vue-qill-editor

关于打包发布Vue项目的一些配置，在config文件夹内的index.js文件中。

我们在使用命令npm run dev 之后就可以在浏览器中输入localhost：8080（如果没有在config/index.js中修改的话）。但是当我们使用本地IP地址去替换localhost进行访问的时候是无法正常打开页面的。
原因就在于：前端的项目是通过webpack的dev server去启动的。webpack dev server默认不支持使用IP进行页面的访问。若要使其支持，需要修改默认的配置项（package.json）。
将

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

改写成

"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

当使用npm run build 之后，就发布项目。将项目中的index.html文件以及static文件夹放到web站点的根目录就行了。

如果想要在根路径下创建一个叫做page的文件夹，将前端打包发布好的文件放在这个文件夹中，需要更改config文件下的index.js文件：

将

assetsPublicPath: '/',

改写成

assetsPublicPath: '/page',

之后，再重新运行npm run build，将生成的dist文件夹改名叫做page就可以了。

当打包后的文件，由于第三方类库的文件太大的时候，可以使用CDN的方式来解决这个问题。