环境搭建

环境搭建

安装node.js

官网下载安装

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装脚手架

cnpm install -g @vue/cli

• 注：如果安装出错，可使用下面命令清空缓存后再试

npm cache clean --force

项目的创建

创建项目

# cd 进入到目标文件夹，项目会创建在该文件夹下
vue create <project-name>

# 选择自定义方式创建项目，选取Router，Vuex插件，选择项按推荐的大写字母项选择

启动/停止项目

# 启动项目
npm run server

# 停止项目
Ctrl + c

打包项目

npm run build

项目文件结构

项目目录

• dist: 打包的项目目录(打包后会生成)
• node_modules: 项目依赖
• public: 共用资源
• src: 项目目标,书写代码的地方
  • -- assets:资源
  • -- components:组件
  • -- views:视图组件
  • -- App.vue:根组件
  • -- main.js: 入口js
  • -- router.js: 路由文件
  • -- store.js: 状态库文件
• vue.config.js: 项目配置文件(没有可以自己新建)

配置文件：vue.config.js

// 用来修改端口，可根据需求修改
module.export = {
    devServer: {
        port: 8888
    }
}

入口文件：main.js

new Vue ({
    el: '#app',
    router: router,
    store: store,
    // render: h => h(App),
    // 箭头函数等同于以下写法
    render: function (h) {
        return h(App),
    }
})

.vue文件

<template>
 <!-- 模板区域 -->
</template>
<script>
 // 逻辑代码区域
 // 该语法和script绑定出现
 export default {

 }
</script>
<style scoped>
 /* 样式区域 */
 /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>