vue-cli脚手架

  vue-cli  脚手架,就是说,在 nodejs 中利用 webpack ,帮咱们对 vue 进行了配置,使咱们能够很方便的在 nodejs 中对 vue 来进行操做css

  vue 项目的渲染组件分两种方式渲染html

    runtime-complier 与 runtime-onlyvue

  runtime-complier 与 runtime-only 的区别?node

    二者的区别 runtime-complier 模式,组件只要更新,整个 vue 都会从 beforecreate 开始,从新渲染,runtime-only 从 mounted 开始,两者中后者的性能上要好一些,选择 runtime-only webpack

  建议使用全局安装 vue-cli 版本web

    npm i -g vue-cli  // 这种安装的是 vue-cli 2.0 版本,是稳定版vue-cli

  基于 webpack 的 vue 的项目名称npm

    vue init webpack shangapp  // shangapp 是项目的名称,能够随意取名字服务器

    如图:app

      

      

  启动项目的指令:

    cd 项目的名称

    npm run dev 开启服务器

    npm run build 编译打包

  下载后面目录结构

    

  vue.use()  向 vue 中添加 router 选项

  @ 将相对参考文件  index.html   @ 表明 src

  如图在 src 下面的 route 文件里面的 index.js 文件中

    

  src 与 static 的区别?

    static 和 src 下面的 assets 同样的,能够放 js 文件,图片,css 等等,在 npm run build 打包编译的时候,static 下的文件不会被压缩,而 src 下的文件会被压缩

  项目完成后,打包后不能直接打开文件,要在项目开发完成以后,须要修改的一处地方 

  在 项目的目录下 config 的文件中的 index.js 的文件里面(共两处)

    

    

  当咱们将这两处改了以后,咱们在运行 npm run build 的指令 来进行打包编译,这样的,咱们的效果才能出来,可是,在次到服务器上运行的时候,就可能会失败,由于脚手架的限制,因此咱们尽量的肯定项目上线的时候,再来进行打包编译

相关文章
相关标签/搜索