vue学习笔记2:通过vue-cli创建项目

蛰伏已久 蛰伏已久 2018-08-02

通过vue-cli可以方便的创建一个空项目,看文档有两种方式

方式1

文档地址:https://vuejs-templates.github.io/webpack/

安装运行流程

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

运行命令

npm run dev
#Starts a Node.js local development server


npm run build
#Build assets for production


npm run unit
#Run unit tests in JSDOM with Jest

npm run e2e
#Run end-to-end tests with Nightwatch

npm run lint
#Runs eslint and reports any linting errors in your code.


安装之后的目录解读

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
│   │   ├── index.js            # test build entry file
│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
│   │   ├── setup.js            # file that runs before Jest runs your unit tests
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint config
├── .eslintignore               # eslint ignore rules
├── .gitignore                  # sensible defaults for gitignore
├── .postcssrc.js               # postcss config
├── index.html                  # index.html template
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file


方式2

文档地址:https://cli.vuejs.org/guide/

安装vue  cli3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装成功之后可以查看vue版本

vue --version

通过命令创建项目

vue create hello-world

通过图形化的页面创建项目,我觉得这个比较方便直观

vue ui

运行命令

npm run serve
#本地开发


npm run build
#上线构建


分享到

点赞(0)