用 vue-cli 创建 Vue.js 项目

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

创建真正的 Vue 项目,我们需要配置很多东西,比如你可能需要 Webpack 打包项目,用 Babel 编译代码等等 .. 你还要想办法根据自己的需要把这些工具组合到一块儿去用 ..

Vue 官方提供了一个叫 vue-cli 的命令行工具,可以让我们很方便地去创建 Vue.js 项目 ..

先在全局范围安装一下 vue-cli 工具 .. 打开命令行工具 .. Windows 可以使用 cmder,mac 用户打开系统自带的终端 ..

然后用 npm 在全局范围安装一下 vue-cli .. 加上一个 global 选项,可以在全局范围安装这个工具 .. 这样我们就可以在任何地方使用这个工具了 ..

npm install vue-cli --global

下面再用这个工具去创建一个项目 ... 进入到某个地方 ... 用一下 vue init ,去初始化一个项目 ... 先指定一下项目要使用的模板,vue-cli 提供了一些官方的模板 .. 这里我要使用的是 webpack .. 后面加上项目的名字,比如 vuex-notes-example ..

vue-cli 会先去下载我们指定的项目的模板 .. 然后又会问我们一些问题 .. Project name 是项目的名字 .. Project description 项目的描述 .. Author 是作者 .. Vue Build .. 可以用默认的这个 .. runtime + compiler

需要 vue-router 吗?暂时不需要 .. 要用 ESlint 检查代码吗 .. 需要 ..

选择一个 ESlint 的预设,直接用默认的这个 ..

要配置单元测试吗,暂时不需要 .. e2e tests ,暂时也不需要 ..

安装

再进入到创建的这个项目 .. cd vuex-notes-example

执行一下 npm install .. 这样会去安装项目需要的所有的东西 ..

在它安装的时候,我们可以再用编辑器打开项目 ...

项目需要的东西在 package.json 里面已经列好了 .. 大部分东西都在 devDependencies 里面,就是项目的开发依赖 .. dependencies 里面现在只有一个 vue ..

scripts 下面是一些命令 .. 本地开发的时候可以执行这个 dev 命令 ..

运行

回到命令行 .. 执行一下 npm run dev .. 或者 npm start .. 这样会给我们创建一个本地的服务器 .. 在浏览器上会自动打开服务器的地址 .. 上面会显示一个 Vue 项目的欢迎界面 ..

https://github.com/vuejs/vue-cli

用 vue-cli 创建 Vue.js 项目《 Vue.js:应用案例(Vuex) 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点