Ubuntu创建第一个Vue项目 - Nodejs+npm+cnpm+webpack+git+VSCode

一安装Nodejs

二安装npm（nodejs package manage）

三安装cnpm

一安装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

小白菜_scc

发布了18 篇原创文章 · 获赞 0 · 访问量 568

私信关注