WebStorm项目--Vue.js入门

原文网址：WebStorm项目--Vue.js入门_IT利刃出鞘的博客-CSDN博客

安装Node.js

见：Node.js--下载、安装、配置_IT利刃出鞘的博客-CSDN博客

安装Vue相关

安装git

傻瓜式安装

法1：WebStorm创建

其他网址

在 WebStorm 中以 Vue.js 构建应用入门 | JetBrains Blog

新建工程

File=> New=> Project

注意事项

Location： 最后的项目名不能包含大写字母

Vue CLI：
        默认使用npm/bin下边的npx，使用npx --package @vue/cli vue，所以不需要手动下载vue-cli了。
        @vue/cli内部已经有webpack，所以无需手动下载webpack。  

点击运行或者调试

查看网页

法2：手动创建（vue-cli2）

其他网址

搭建环境与hello world · GitBook
Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目 - Wise.Wrong - 博客园

安装webpack/webpack-cli

npm install webpack webpack-cli -g

安装vue/vue-cli

npm install vue vue-cli -g

创建基于 webpack 模板的新项目 

vue init webpack demo_vue_manual

vue命令用法：vue init <template-name> [project-name]         //template-name可以是git上的，例如：vue init username/repo demo_vue_manual

输出结果：

 可见，vue-cli帮我们生成demo_vue_manual下边的文件

安装依赖

cd demo_vue_manual
npm install

本地以默认端口来运行

npm run dev

结果

网页查看

打开 http://localhost:8080

结果

离线使用vue init

其他网址

离线安装vue-cli webpack - 疯狗强尼 - 博客园

简介

直接使用vue init webpack demo_vue时，会从github上边下载webpack模板，然后使用模板初始化项目。但是，有时会很慢，一直卡在“downloding template”。这时，可以将webpack模板通过其他方法先下载下来，然后离线使用vue init。

方法

1.下载webpack

    地址：GitHub - vuejs-templates/webpack: A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.   
    //实在太慢则直接将此网址转到gitee    注意：转到gitee之后，发现没有发行版，但其实就是对应的tags。例如，github发行版是1.3.1，对应提交是c29ab6a，则到gitee中的“标签”里找到1.3.1，其提交版本也是c29ab6a，这两个就是一个文件，直接下载即可。

2.将webpack放到指定位置

    在C:\Users\xxx\.vue-templates\下新建webpack文件夹，将webpack的内容拷贝进去，示例：

3.离线使用vue init

    vue init webpack demo_vue --offline