使用vue webpack 模板搭建项目步骤:

用cmd gitbash vsCode的终端等命令行工具都可以开始安装。。。如果电脑有安装cnpm,以下操作中的npm都可用cnpm替代。

1. 安装 node.js(npm),因为会用到npm包管理工具下载项目依赖等
2. 安装 webpack: npm install webpack -g
3. 安装 vue-cli: npm i vue-cli -g
4. 通过vue-cli,初始化vue项目: vue init webpack projectName(项目名)

如果之前没有建过重名的项目可能下面前几步中有几步会没有,没关系,照着操作就行。

$ vue init webpack projectName--------------------- 安装vue-cli,初始化vue项目的命令
? Target directory exists. Continue? (Y/n) y---------------------找到了projectName这个目录是否要继续
? Target directory exists. Continue? Yes
? Project name (projectName)---------------------回车,项目的名称(默认是文件夹的名称),ps:项目的名称不能有大写,不能有中文,否则会报错
? Project name projectName
? Project description (A Vue.js project)---------------------回车,项目描述,可以自己写
? Project description A Vue.js project
? Author (OBKoro1)---------------------回车,项目创建者
? Author OBKoro1
? Vue build (Use arrow keys)--------------------选择打包方式,有两种方式(runtime和standalone),使用默认即可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安装路由,一般都要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则,这里个人建议选no,因为经常会各种代码报错,新手还是不安装好
? Use ESLint to lint your code? n
? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
? Setup unit tests with Karma + Mocha? n
? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试
? Setup e2e tests with Nightwatch? n
123456789101112131415161718192021

在这里插入图片描述

5. 进入到项目目录: cd projectName(项目名)
6. 安装项目依赖: npm install
7. 启动项目: npm run dev

在这里插入图片描述

8.浏览器打开

启动成功,默认不会自动跳转,所以我们得去浏览器手动输入它推荐的http://localhost:8080
出现了下面页面就表示搭建成功了。
在这里插入图片描述

项目文件的说明:

在这里插入图片描述

如果要查看详细的搭建信息,推荐浏览:
2.9.6版:https://www.jianshu.com/p/32beaca25c0d
3.11.0版:https://blog.csdn.net/weixin_45600332/article/details/105744486

Logo

前往低代码交流专区

更多推荐