Vue-cli快速原型开发

772 阅读1分钟

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -gyarn global remove vue-cli 卸载它。

可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

你还可以用这个命令来检查其版本是否正确:

vue --version

你可以使用 vue servevue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:

npm install -g @vue/cli-service-global

vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

创建一个项目

#vue create

运行以下命令来创建一个新项目:

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

创建完 hello-world,要切换到该目录再执行启动操作。

**当时**

hello-world还有一级目录,导致启动报一下错误

npm start报“npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\XXX\package.json'”

解决办法就是进入想要启动的项目的文件夹,执行如下命令切换项目后启动。

$ cd antv 

 $ npm run serve 

访问http://localhost:8080/即可看到页面。

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。