vue新建项目

1. 安装node

2. 切换镜像源

> 让安装包的速度更快

3. 安装@vue/cli脚手架(https://cli.vuejs.org/zh/)

npm i @vue/cli -g

查看@vue/cli版本

vue -V

4. 创建项目

vue create 项目名 例如

vue create my-app

5、启动项目

cd my-app 进入项目目录

npm run serve 启动命令

6、认识Vue工程化目录

node_modules 项目依赖

+ public html模板文件

+ src 项目核心代码

- assets 存放静态资源(css、img)

- components 存放公共组件

- views 存放业务组件

- App.vue 根组件

- main.js 入口文件(Vue初始化、全局配置)

+ .gitignore 让git忽略管理某些文件

+ package.json 项目依赖信息、启动命令

快速搭建.vue组件基本结构

vbase 需要修改样式区域的lang="less"

vbase-less

在vscode中配置gitbash

"terminal.integrated.profiles.windows": {

    "git-bash": {

        "path": "D:\\software\\Git\\bin\\bash.exe",

        "args": []

    },

},

"terminal.integrated.defaultProfile.windows": "git-bash",

 npm命令汇总

npm init   初始化,生成package.json

npm install 包名 --save     安装生产依赖

npm i 包名 -S

npm i 包名

npm install 包名 --save-dev    安装开发依赖

npm i 包名 -D

npm install     自动读取当前目录package.json中的包信息,并依次安装

npm i

npm uninstall 包名    卸载依赖包

npm run 命令      执行项目相关命令

<think>好的,用户想在WebStorm中创建一个新的Vue 2项目。首先,我需要回忆一下Vue项目创建的流程和相关工具。根据引用内容,用户可能需要安装Vue CLI,因为引用[3]和[4]提到了使用Vue CLI来生成项目模板。Vue CLI是Vue的官方脚手架工具,支持创建Vue 2和Vue 3项目。 接下来,用户明确要使用Vue 2,所以需要确保安装的是支持Vue 2的CLI版本。引用[4]提到如果之前安装了Vue 2,可能需要先卸载旧版本,再安装新的。但这里用户可能没有安装过,或者需要检查现有版本。因此,步骤可能包括安装Vue CLI,然后创建项目时选择Vue 2的选项。 然后,WebStorm本身有创建新项目的选项,但可能需要配置使用Vue CLI。引用[5]提到在WebStorm中使用Vue CLI创建Vue 3项目,类似地,创建Vue 2应该也是通过CLI,但在创建项目时选择Vue 2的预设。需要指导用户如何在WebStorm的界面中选择Vue.js,并配置Vue CLI作为构建工具。 另外,用户可能需要运行命令来启动项目,比如npm run serve,如引用[5]所示。此外,引用[1]和[2]提到在WebStorm中打开现有项目或通过命令行创建,但用户需要的是新建项目,所以重点应放在通过WebStorm的图形界面创建,同时结合命令行步骤。 需要检查是否需要全局安装Vue CLI,安装命令是npm install -g @vue/cli,如引用[3]和[4]所示。安装完成后,在WebStorm中新建项目时应该可以选择Vue.js,并指定Vue 2的模板。或者,可能需要通过命令行创建项目,然后在WebStorm中打开,如引用[2]所述。 总结步骤应该是:安装Vue CLI,在WebStorm中选择Vue项目模板,创建时选择Vue 2,然后运行项目。另外,可能需要注意权限问题,特别是Mac用户,如引用[4]提到的sudo命令。需要提醒用户根据系统情况调整安装命令的权限。 可能遇到的问题包括旧版本冲突,所以建议用户先卸载旧版CLI,再安装新版,但确保支持Vue 2。同时,项目创建后需要正确配置npm run serve来启动,如引用[5]所示。最后,确保指导用户如何在WebStorm中打开和运行项目,可能涉及终端命令的使用。</think>### 如何在 WebStorm 中新建 Vue 2 项目 #### 步骤 1:安装 Vue CLI(脚手架) Vue CLI 是创建 Vue 项目的官方工具,需先全局安装: ```bash npm install -g @vue/cli ``` 如果已安装过旧版本,需先卸载: ```bash npm uninstall -g vue-cli # Vue 2 旧版本卸载[^4] ``` #### 步骤 2:在 WebStorm 中创建 Vue 2 项目 1. 打开 WebStorm,选择 **File > New > Project**; 2. 在左侧模板中选择 **Vue.js**; 3. 在右侧配置中: - **Vue CLI**:选择已安装的 `@vue/cli` 路径(通常会自动识别); - 勾选 **Create Vue 2 project**(若未显示此选项,需通过命令行创建); 4. 输入项目名称和路径,点击 **Create** [^3][^5]。 #### 步骤 3:通过命令行创建(备选方案) 若 WebStorm 界面未显示 Vue 2 选项,可手动创建: 1. 打开终端(WebStorm 内置或系统终端); 2. 运行命令: ```bash vue create my-vue2-project ``` 3. 选择 **Vue 2** 预设模板[^3]。 #### 步骤 4:启动项目 1. 在 WebStorm 中打开项目根目录(File > Open...); 2. 打开内置终端,运行: ```bash npm run serve ``` 3. 浏览器访问 `http://localhost:8080` 查看效果[^1]。 --- ### 常见问题解决 1. **权限问题(Mac)**: 安装失败时尝试: ```bash sudo chown -R $(whoami) /usr/local/* sudo npm install -g @vue/cli ```[^4] 2. **模板兼容性问题**: 若需使用 Webpack 或其他配置,可在 `vue create` 时选择 **Manually select features**。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值