搭建VUE2.0项目

292 阅读2分钟

搭建VUE2.0项目

官方文档:

cn.vuejs.org/

第一步

安装node.js
nodejs.org/en/

第二步

命令行查看版本号
node -v
npm -v

如果npm不是最新版本,最好升级到最新版本

npm install -g npm

第三步

安装淘宝镜像

npm config set registry "https://registry.npm.taobao.org"
npm install -g cnpm

第四步

检验是否安装成功

npm config get registry

第五步

全局安装webpack

npm install webpack -g

webpack 4.X 开始,需要安装 webpack-cli 依赖

npm install webpack webpack-cli -g

查看版本号
webpack -v

第六步

【全局安装vue-cli】2.x版本

npm install -g vue-cli

若出现“Unexpected end of JSON input while parsing near”错误, 命令行输入
npm cache clean --force

第八步

创建项目
下载模板

vue init webpack vue-demo(项目名称)

?Project name vue-demo 项目名称,直接回车,按照括号中默认名字(注

意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer

contain capital letters)。

? Project description A Vue.js project 项目描述,直接回车或随便写

? Author # 作者名称 回车

? Vue build standalone # 我选择的运行加编译时 回车

Runtime + Compiler: recommended for most users[推荐]

? Install vue-router? Yes # 是否需要 vue-router

? Use ESLint to lint your code? 选择No # 是否使用 ESLint 作为代码规

范. 对ES代码

有限制 link-限制 如果选择了YES则会有下选项

? Pick an ESLint preset Standard # 一样的ESlint 相关

? Set up unit tests Yes # 是否安装单元测试 选择No

? Pick a test runner 按需选择 # 测试模块选择No

? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试选择No

? Should we run npm install for you after the project has been

created? (recommended) npm # 包管理器,选NPM\

【命令行进入该目录】

cd vue-demo

【初始化项目】

npm install

【启动项目】

npm run dev

【终止项目】

ctrl+c

【项目打包上线】

npm run build

将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可`