目录
二 安装npm(nodejs package manage)
一 安装Nodejs
简单的说 Node.js 就是运行在服务端的 JavaScript
// 安装命令
sudo apt-get install nodejs
// 安装成功后,执行此命令,测试是否安装成功
nodejs -v
// 如果安装成功会返回nodejs的版本号
二 安装npm(nodejs package manage)
npm是NodeJS自带的包管理工具
// 安装命令
sudo apt install npm
// 安装成功后,执行此命令,测试是否安装成功
npm -v
// 如果安装成功会返回npm的版本号
如果报错:
The following packages have unmet dependencies:
npm : Depends: node-gyp (>= 0.10.9) but it is not going to be installed
E: Unable to correct problems, you have held broken packages.
解决方式
sudo apt install aptitude
sudo aptitude install npm
// 执行过程中会提示两次
Accept this solution? [Y/n/q/?]
// 第一次n,第二次Y
// 还会提示一次
Do you want to continue? [Y/n/?]
// 选Y
三 安装cnpm
cnpm是npm的淘宝镜像。因为npm的服务器在国外,受网络影响大,可能出现异常,所以淘宝做了一个完整 npmjs.org
镜像,用来代替官方版本(只读)
// 安装命令
sudo npm install cnpm -g
// 测试命令
cnpm -v
四 安装vue
// 安装vue
cnpm install vue
// 全局安装脚手架工具vue-cli
cnpm install --global vue-cli
// 无奈报错
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/vue-cli_tmp'
// 所以最终使用了如下命令安装成功
sudo cnpm install --global vue-cli
// 安装成功后,执行此命令,测试是否安装成功
vue -v
// 如果安装成功会返回npm的版本号
五 安装webpack
webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
cnpm install webpack
六 安装git
1、安装git
sudo apt-get install git
2、配置git用户名和邮箱
// xxx 代表用户名
git config --global user.name 'xxx'
// [email protected] 代表邮箱
git config --global user.email '[email protected]'
3、创建验证用的公钥
// 注意空格
ssh-keygen -C '[email protected]' -t rsa
// 一路按enter
最终会出现类似如下的返回
4、复制公匙
// 打开ssh文件夹
cd ~/.ssh进入~/.ssh
// 打开id_rsa.pub文件
gedit id_rsa.pub
5、【登录GitHub】→点击【个人头像】→点击【settings】→点击【SSH and GPG keys】→点击【New SSH key】
将id_rsa.pub中的内容复制进去
6、测试
ssh -T [email protected]
返回如下内容代表成功
参考:Git命令大全 https://www.jianshu.com/p/46ffff059092
七 安装VS Code
1、下载 https://code.visualstudio.com/Download
2、解压
sudo dpkg -i code_1.41.1-1576681836_amd64.deb
3、解压后,在全部应用的区域,可以找到VS Code的图标,点击即可打开
八 创建第一个VS Code项目
1、创建项目
vue init webpack myvue
// myvue是自定义的项目名字
可以自己填写,也可以一路按enter键选择默认项,到最后一个选 no
2、运行项目
// cd到项目文件夹
cd myvue
// 安装依赖
cnpm install
// 然后输入以下指令
cnpm run dev
3、在浏览器中打开网站http://localhost:8080,如果看到如下画面就是成功了
九 一些常用的VS Code 插件
1、Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)
2、EsLint —— 语法纠错
3、Auto Close Tag —— 自动闭合HTML/XML标签
4、Auto Rename Tag —— 自动完成另一侧标签的同步修改
5、Path Intellisense —— 自动路劲补全
6、HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
7、HTML Snippets —— 智能提示HTML标签,以及标签含义
8、avaScript(ES6) code snippets ——ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
9、snippet——配置用户代码片段 https://juejin.im/post/5b99ed89f265da0af7750612
八、VSCode快捷键
https://segmentfault.com/a/1190000019821154
https://blog.csdn.net/y_dzaichirou/article/details/102634580
end