推荐使用Node.js的包管理器 npm来构建项目,这是全球最大的开源库生态系统。下载安装后,在命令窗口通过以下命令可以检测node.js版本信息
node --version
同样也可以检测npm的版本信息,验证安装
npm -v
在开始创建Vue项目之前,请先安装webpack(前端资源加载/打包工具);
以及Vue的官方命令行工具Vue-cli,这将用于快速搭建大型单页应用,仅仅只需几分钟
npm install webpack -g
npm install vue-cli -g
接下来选择一个期望的目录来保存项目
cd 你的目标目录
见证奇迹的时刻到了,通过以下Vue-cli命令,创建一个基于webpack模板的Vue项目。
vue init webpack my-project
按照命令提示一步步完善项目信息,包括
? Project name xxx 项目名称
? Project description xxx 项目描述
? Author xxx 项目作者
? Vue build standalone 构建方式
? Install vue-router? Yes 是否安装路由
? Use ESLint to lint your code? No 是否启用eslint检测规则
? Setup unit tests with Karma + Mocha? No 是否启用单元测试
? Setup e2e tests with Nightwatch? No 是否启用端到端测试
稍等片刻,项目构建成功,接下来命令窗口会提示您可以:
npm install 安装项目依赖
cd 你的目标目录 进到项目目录
npm run dev 启动项目
此时如果一切顺利,在浏览器打开http://localhost:8080,就可以看到以下页面了
恭喜!您的Vue项目已经在运行了。
而项目结构应该就是这样: