1.准备工作检查node与npm是否能正常使用
【命令行查看版本号】
node -v
npm -v
【升级npm(可选操作)】
npm install -g npm
【修改为淘宝镜像(可选操作)】
淘宝镜像为国内源,下载速度更快
npm config set registry "https://registry.npm.taobao.org"
2.安装
【全局安装 webpack】
npm install webpack -g
【webpack 4.X 开始,需要安装 webpack-cli 依赖】
npm install webpack webpack-cli -g
【查看版本号】
webpack -v
【全局安装vue-cli】
npm install -g vue-cli
【查看版本号】
vue -V
若报“Unexpected end of JSON input while parsing near”
错误,
我们的解决方法是:先清除缓存,再重新安装
npm cache clean --force
npm install
3.创建项目
【命令行进入该目录】个人不建议选择C盘
cd D:\vue\vue-demo
【下载模板】
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? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,我选的NPM
4.安装成功后,进入项目目录
【命令行进入该目录】
cd D:\vue\vue-demo
【初始化项目】
npm install
【启动项目,根据package.json中的数据来启动】
npm run dev
【关闭项目】
Ctrl + C
【浏览器访问:】
http://localhost:8080/
【项目打包上线】
npm run build
将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可
6.代码编辑可以使用Visual Studio Code
插件多,很多功能都可以支持