搭建vue项目
环境准备
- 安装node.js
官方地址:https://nodejs.org/en/ 或 https://nodejs.org/zh-cn/
- 安装vue
npm install --global vue-cli
创建vue项目
-
创建项目,找一个文件夹以管理员身份打开命令行
- 输入一下命令:
vue create vue-project
然后回车 - vue create 项目名称
- 输入一下命令:
-
选择初始化项目的配置
-
Please pick a preset: (Use arrow keys):请选择一个预设方向(如果有以前的预设模板可以使用)默认版本回车就可以
-
Default ([Vue 2] babel, eslint):默认的vue设置模板,会创建一个vue2项目,当然没有npm包
-
Default (Vue 3) ([Vue 3] babel, eslint):默认的vue设置模板,会创建一个vue3项目,当然没有npm包
-
Manually select features:自定义配置,可以自己选择配置选项 ,使用方向键 ↓ 选择到第三个,然后回车来到自定义配置项
Check the features needed for your project:(检查你的项目需要的功能:)
- Check the features needed for your project:(检查你的项目需要的功能:)
- Choose Vue version(选择版本号)
- Babel
(在webpack 中,默认只能处理 一部分 ES6 的新语法,一些更高级的ES6语法或者 ES7 语法,webpack 是处理不了的;
这时候就需要 借助于第三方的 loader,来帮助webpack 处理这些高级的语法,当第三方loader 把 高级语法转为 低级的
语法之后,会把结果交给 webpack 去打包到 bundle.js 中) - TypeScript(支持typeScript写源码)
- Progressive Web App (PWA) Support(这个意思暂且不明白)
- Router(自动配置路由)
- Vuex(自动配置vuex 全局状态管理)
- CSS Pre-processors(支持css预处理器:如 less,sass)
- Linter / Formatter(代码规范:如eslint)
- Unit Testing(支持单元测试)
- E2E Testing(支持E2E测试)
-
这里我们选择以下几种然后回车
-
-
选择vue版本,这里以vue3为例,回车
-
因为上面选择了router,所以这里让我们选择:history 这里我们先不选择
-
css预处理器选择,这里选择less
- 选择 CSS 预处理器。node-sass 是自动编译实时的,dart-sass 需要保存后才会生效,可以根据自己需要选择相应的css预处理,选择后回车即可
-
语法检查工具,这里我们选择默认的就行直接回车
- 什么时候检测语法,这里选择保存时校验
- Lint on save 保存时检查
- Lint and fix on commit 提交时检查
- 什么时候检测语法,这里选择保存时校验
-
配置文件放置位置,为了清晰明了的看各个文件,这里选择第一个
- In dedicated config files 存放到独立文件中
- In package.json 存放到 package.json 中
-
是否要保存当前配置,下次创建时可以快速创建,这里我选择了NO,下次重新配置,当然你也可以选择保存模板
-
如果保存模板会让你输入模板名称
-
等你下次创建项目时就可以直接选择此次模板了
-
-
初始化完成,接下来你就可以根据提示启动项目了
-
进入项目文件夹输入,以下命令
cd vue-project
进入项目
-
输入以下命令
npm run serve
启动项目
-
-
项目启动成功
-
出现以下页面就是启动成功了
-
访问对应的IP地址就可以访问你刚才创建的vue项目了
-
-
如果想关闭项目
- 使用快捷键:
ctrl + c
出现以下页面 选择 y 回车就停止了
- 使用快捷键:
-
项目启动后直接再浏览器内打开
- 方法一:在根目录下创建:
vue.config.js
在里面创建以下代码
const path = require("path"); module.exports = { devServer: { host: "0.0.0.0", port: 9000, // 端口号 open: true, //运行后是否自动在浏览器打开 }, };
方法二:在package.json里面加入这行代码
"serve": "vue-cli-service serve --open",
- 方法一:在根目录下创建:
-
部署项目到服务器,可以看我另一篇文章
linux 安装 nginx 以及部署 vue 到服务器