Vue CLI 3 快速上手

未解之谜:我学前端干什么???


官方的说明文档写得烂,废话多,用过 vue 的人自然会,没用过 vue 的人完全看不懂。

安装

  1. 安装 nodejs。略。
  2. 安装 Vue CLI:npm install -g @vue/clivue 命令现在将变得可用(存放在 npm 命令相同的目录下)

创建工程

  1. 创建一个 hello world 工程:vue create hello-world
  2. 在项目创建的过程中,你会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择将会存入 ~/.vuerc
  3. 按回车选择default,将在当前目录下创建一个hello-world文件夹,内有三个子目录:node_modules(依赖文件,不要动)、public(编译后的结果)、src(源码)。

预览&编译

  1. vue ui 可以唤出图形界面,然并卵。查看package.json中的scripts部分,里面有三项:serve(生成预览版)、build(生成发行版)、lint(代码检测工具)。
  2. cd hello-world 然后 npm run serve 运行测试(预览)。将会在 localhost:8080 启动服务并弹出该网页。
  3. npx vue-cli-service build 编译(其实用npm run build也可以的),把生成的 dist 目录交付即可。其中 dist/index.html 是入口,dist/static/ 是静态资源(css 和 js 等)。

开发

请参考:


以上。

猜你喜欢

转载自blog.csdn.net/kencaber/article/details/86564529