搭建vue项目

搭建vue项目

环境准备

1. 安装node.js

官方地址：https://nodejs.org/en/ 或 https://nodejs.org/zh-cn/

2. 安装vue

npm install --global vue-cli

创建vue项目

1. 创建项目，找一个文件夹以管理员身份打开命令行
   

   • 输入一下命令：vue create vue-project 然后回车
   • vue create 项目名称

2. 选择初始化项目的配置
   

   • 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测试）

   • 这里我们选择以下几种然后回车
     

3. 选择vue版本，这里以vue3为例，回车
   

4. 因为上面选择了router，所以这里让我们选择：history 这里我们先不选择
   

5. css预处理器选择，这里选择less
   

• 选择 CSS 预处理器。node-sass 是自动编译实时的，dart-sass 需要保存后才会生效，可以根据自己需要选择相应的css预处理，选择后回车即可

6. 语法检查工具，这里我们选择默认的就行直接回车
   

   • 什么时候检测语法，这里选择保存时校验
     • Lint on save 保存时检查
     • Lint and fix on commit 提交时检查
       

7. 配置文件放置位置，为了清晰明了的看各个文件，这里选择第一个

   • In dedicated config files 存放到独立文件中
   • In package.json 存放到 package.json 中
     

8. 是否要保存当前配置，下次创建时可以快速创建，这里我选择了NO,下次重新配置，当然你也可以选择保存模板
   

   • 如果保存模板会让你输入模板名称
     

   • 等你下次创建项目时就可以直接选择此次模板了
     

9. 初始化完成，接下来你就可以根据提示启动项目了
   

   • 进入项目文件夹输入，以下命令 cd vue-project 进入项目
     

   • 输入以下命令 npm run serve 启动项目
     

10. 项目启动成功

    • 出现以下页面就是启动成功了
      

    • 访问对应的IP地址就可以访问你刚才创建的vue项目了
      

11. 如果想关闭项目

    • 使用快捷键： ctrl + c 出现以下页面 选择 y 回车就停止了
      

12. 项目启动后直接再浏览器内打开

    • 方法一：在根目录下创建：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",
    

13. 部署项目到服务器，可以看我另一篇文章
    linux 安装 nginx 以及部署 vue 到服务器