创建Vue项目

命令行工具cli

在安装node、npm后创建vue项目

npm install -g vue-cli  (-g  是全局安装 会安装node 的文件夹下)

vue init webpack first-vue

cd first-vue

npm install

npm run dev

然后  浏览器下运行 

运行成功

若是 Module build failed: Error: No parser and no file path given, couldn't infer a parser. 报错 执行：

npm i prettier@~1.12.0

npm？cnpm？

npm（node package manager）--------nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

cnpm '中国版'npm  npm安装插件是从国外服务器下载，受网络影响大，可能出现异常   这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步

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

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

npm run dev指令分析

bulid与run的文件 

  还有package.json

package.json里面

"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build":"node build/build.js",

所以 运行”npm run dev”的时候执行的是build/webpack.dev.conf.js文件

        运行”npm run build”的时候执行的是build/build.js文件

build/webpack.dev.conf.js文件：

    将hot-reload相关的代码添加到entry chunks

    合并基础的webpack配置

    使用styleLoaders

    配置Source Maps

    配置webpack插件

webpack.base.conf.js配置文件

    是vue开发环境的wepack相关配置文件，主要用来处理各种文件的配置

    参考【https://www.cnblogs.com/ye-hcj/p/7082620.html】

build/utils.js和build/vue-loader.conf.js

    utils主要完成下面3件事：

        配置静态资源路径

        生成cssLoaders用于加载.vue文件中的样式

        生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

    vue-loader.conf   则只配置了css加载器以及编译css之后自动添加前缀

build/build.js文件：

    loading动画

    删除创建目标文件夹

    webpack编译

    输出信息

config/index.js:

    描述了开发和构建两种环境下的配置

vue项目目录结构

目录

build     项目构建(webpack)相关代码

config   配置目录，包括端口号等

node_modules    npm 加载的项目依赖模块

src         assets: 放置一些图片，如logo等

             components: 组件文件

             App.vue: 项目入口文件

             main.js: 项目的核心文件

static    静态文件 如图片 字体

test      初始测试目录 可删除

index.html   首页入口文件

package.json    项目配置文件

这里有一张图清晰的告诉我们目录结构的含义

简洁吧！