vs code 第一次创建前端项目 vuejs 从零开始

第一阶段

在网上找了很多,都没有找到创建新项目的步骤,真的不明白你们一个个发csdn是干啥的?能不能为大家创建一个好的学习平台,搜索全是垃圾内容(别喷我),下边我为大家整理一下详细的创建新项目步骤,一步一步跟着来
1.安装nodejs,网上一堆的教程,基本上下载后傻瓜式一路next

2.安装npm,网上一堆的教程,也是基本下载后傻瓜式一路next

3.安装完成运行cmd,查看是否安装成功

node -v ,

vscode 怎么创建swift vscode怎么新建项目_npm


4.安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。

在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待

5.安装完成如下图。

vscode 怎么创建swift vscode怎么新建项目_npm_02


6.安装vue-cli脚手架构建工具在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

vscode 怎么创建swift vscode怎么新建项目_npm_03


7.在桌面上新建项目 ResumeProgram

vue init webpack firstVue

–这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的

其中 ResumeProgram 是整个项目文件夹的名称,这个文件夹会自动生成在桌面

vscode 怎么创建swift vscode怎么新建项目_vscode 怎么创建swift_04


8.运行完成后会要写项目名称啊什么的,可以写一下,也可以在后面的pakeage.json里面修改

vscode 怎么创建swift vscode怎么新建项目_命令行_05

9.vs code 打开项目,作者这些自己改就行,这个时候有许多的插件是没有安装的,文件夹内是没有生成node_modules文件夹的

vscode 怎么创建swift vscode怎么新建项目_npm_06


10.要安装依赖包,按下快捷键 ctrl+shift+,(在键盘左上角esc下边)

输入npm install,完成后出现node_modules

vscode 怎么创建swift vscode怎么新建项目_vue_07


12.想要运行这个项目的话,在【终端】-【新建终端】,在打开的输入 npm run dev 回车,接着等

注意有时候运行指令不是dev,看下图标记再输入对应的指令 (比如npm run server)

vscode 怎么创建swift vscode怎么新建项目_npm_08


13.运行完成后,自动打开一个端口,复制这个链接到浏览器上,浪起来吧,少年~~~

vscode 怎么创建swift vscode怎么新建项目_命令行_09

第二阶段 创建vue模板

我们基本只需要关心 src 文件夹,其他的基本不管

【【【为了以后创建页面省事,妥妥的必需,不然几十个页面搞死你】】】

ctrl+shift+p 出来吧,控制面板,输入 snippet

vscode 怎么创建swift vscode怎么新建项目_vue_10


配置模板,我用的是下面的这个

{
 “vue-template”: {
 “prefix”: “vue”,
 “body”: [
 “”,
 " <div class=“wrapper”>$0",
 “”,
 “”,
 “  ”,
 “<style lang=“scss” scoped>”,
 “”,
 “”,
],
 "description": "my vue template"
}

然后在新建的页面 输入 vue 会自动带出这个模板

轻松+惬意 ~~

好了,今天就写到这。看看明天能不能够继续!

打字不易,有问题和不足清及时联系,感觉有用的可以点个赞哦