有三种方式创建vue项目,1.本地引入vuejs、2.使用cdn引入vuejs、3.使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广泛。
下面介绍利用vue-cli创建项目的具体步骤:
首先,检查电脑上是否已安装好了npm 因为所有的依赖都要依靠npm来安装(终端中执行npm -v查看版本,有则已安装,提示错误则是没安装,需要前去下载),接下来:
一.安装vue-cli:
1.终端中进入想要放置新项目的文件夹目录,
2.执行npm install -g vue-cli 或者是 cnpm i -g vue-cli
("-g"表示全局安装,如果不加"-g"会在当前文件夹下生成vue-cli的依赖包:node-modules,建议加上"-g",cnpm是走国内安装的路线,npm下载不成功时可使用)
3.下载完成后, 在终端中输入vue -v 查看版本,显示版本则表示下载成功.
二.利用vue-cli创建vue项目:
终端中执行命令: vue init webpack demo(demo是自定义的项目名);
此时终端会出现一系列操作提示:
Project name(工程名):回车
Project description(工程介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):回车
Use ESLint to lint your code(是否使用ESLint检查js代码):n
Set up unit tests(安装单元测试工具):n
Setup e2e tests with Nightwatch(是否安装端到端测试工具):n
Should we run npm install for you after the project has been created? (recommended):回车。
一切完成之后就创建了一个新项目的基础架构.
三.启动项目:
1.进入项目目录:cd demo
2.安装项目所需要的依赖:npm install
3.启动项目:npm run dev
启动成功以后,浏览器打开:localhost:8080,即可看到vue项目,如果浏览器不自己打开,就手动打开浏览器,输入网址即可看到vue项目的页面("8080"是端口,可在vue项目里自己进行设置)