Mac下搭建VUE项目

Mac下搭建VUE项目

• 说明：本人电脑之前安装过node和npm，这里按照官网提供的方法简单编写；
• 操作系统：macOs
• 系统版本：10.15.5

1.安装node，npm环境

你可以通过以下两种方式在 Mac OS 上来安装 node：

• 1、在官方下载网站下载 pkg 安装包，直接点击安装即可。
• 2、使用 brew 命令来安装：

  brew install node
  

可能出现的问题：
在 MAC 上安装使用 brew install nvm, 其中 brew 是 Homebrew。
安装 nvm 后可能会出现 zsh: command not found: nvm，我们可以使用以下命令来安装：

curl -o- [https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh](https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh) | bash [[ -s $HOME/.nvm/nvm.sh ]] && . $HOME/.nvm/nvm.sh

使用

nvm ls-remote 查看有哪些node版本可以安装
nvm 用于管理node 版本
nvm list 查看当前所有的node 版本
nvm install v10.13.0 安装指定的版本，安装多版本
nvm use —delete-prefix 10.13.0 使用nvm use切换到指定的版本
nvm current 查看当前node版本
nvm alias default <version> 命令来指定一个默认的node版本

安装完成后在终端输入（如图所示）：出现版本即可表示安装完成

2.搭建vue项目环境

• 1、全局安装vue-cli

npm install --global vue-cli

• 2、进入你的项目目录，创建一个基于 webpack 模板的新项目:

vue init webpack 项目名

说明：

• Vue build ==> 打包方式，回车即可；
• Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
• Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
• Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
• Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

• 3.进入项目：cd 5gmessage，安装依赖

cnpm i

• 4、npm run dev，启动项目
  
  浏览器访问：localhost:8080

3.vue项目目录

• 目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

• 1、build：构建脚本目录

  • 1）build.js ==> 生产环境构建脚本；

  • 2）check-versions.js ==> 检查npm，node.js版本；

  • 3）utils.js ==> 构建相关工具方法；

  • 4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；

  • 5）webpack.base.conf.js ==> webpack基本配置；

  • 6）webpack.dev.conf.js ==> webpack开发环境配置；

  • 7）webpack.prod.conf.js ==> webpack生产环境配置；

• 2、config：项目配置

  • 1）dev.env.js ==> 开发环境变量；

  • 2）index.js ==> 项目配置文件；

  • 3）prod.env.js ==> 生产环境变量；

• 3、node_modules：npm 加载的项目依赖模块

• 4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件

  • 1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

  • 2）components：组件目录，我们写的组件就放在这个目录里面；

  • 3）router：前端路由，我们需要配置的路由路径写在index.js里面；

  • 4）App.vue：根组件；

  • 5）main.js：入口js文件；

• 5、static：静态资源目录，如图片、字体等。不会被webpack构建

• 6、index.html：首页入口文件，可以添加一些 meta 信息等

• 7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

• 8、README.md：项目的说明文档，markdown 格式

4.开始vue项目

• 1、在components目录下新建一个views目录，里面写我们的vue组件
  • 1）开始我们的第一个组件：
    • a：在views目录下新建home.vue
    • b：在router目录下的index.js里面配置路由路径

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import home from '@/components/views/home'
    
    Vue.use(Router)
    
    export default new Router({
        routes: [
                    {
                        path: '/',
                        name: 'HelloWorld',
                        component: HelloWorld
                    },
                    {
                        path: '/views',
                        name: 'home',
                        component: home
                    },
                ]
    })
    

    • c：编写App.vue 中的template 写 html，script写 js，style写样式

    <template>
        <div class="home-app">
            {{msg}}
        </div>
    </template>
    
    <script>
        export default {
            name: 'App',
            data(){
                return{
                    msg:"Welcome to 5G home"
                    };
            }
        }
    </script>
    
    <style>
        #app {
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
    </style>
    
    

    • d：输入http://localhost:8080/#/home，查看页面效果
      简单写到这里，初学VUE做个总结，后续跟进项目会继续更新…，喜欢的朋友来个三连呗~