如何从0到1创建一个vue项目

系统管理员 2023-06-27 03:25 38阅读 0赞

**完整地址：`https://github.com/jiuchengTk279/vueDemo`**

1.  第一步，安装`vue-cli`脚手架，通过 `npm install -g @vue/cli` 或者 `cnpm install -g @vue/cli` 命令进行安装  
    ![在这里插入图片描述][2020010217212813.PNG]
2.  第二步，使用`vue-cli`脚手架创建项目，通过`vue init webpack vuDemo`命令，最后一个为项目的名称，可以自己命名，使用了`webpack`打包工具  
    ![在这里插入图片描述][20200102172141492.PNG]  
    如图所示，需要确认以下的信息：  
    1）`Projetc name` 是项目的名字，选择确认  
    2）`Project description` 是项目的描述，选择确认  
    3）`Author`是作者，选择确认  
    4）`Vue build` 是`vue`的构建，选择为独立的  
    5）`Install vue-router` 是`vue`的路由，选择确认下载`vue`路由  
    6）`Use ESLint` 是`ESlint`的严格语法，确认是`ESLint`严格语法在项目的代码中  
    7）`Pick an ESLint preset` 是选择`ESLint`的预设，选择标准的预设  
    8）`Set up unit tests` 是创建单元测试，选择不创建单元测试  
    9）`Setup e2e tests` 是创建`e2e`测试，选择不创建  
    10）`Should we run npm install` 是选择`npm`进行下载创建项目，选择是`npm`  
    11）之后项目就会被创建了，如图所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]  
    项目创建成功以后，如图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 1][]  
3. 第三步，切换到创建的项目中，通过 `cd vueDemo` 命令进行切换，后面为项目的名称  
![在这里插入图片描述][20200102172301519.PNG]

1.  第四步，运行项目，通过 `npm run dev` 命令进行运行项目  
    ![在这里插入图片描述][20200102172649364.PNG]  
    项目运行成功后，如图所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 2]  
    创建的项目文件夹如下所示：

![在这里插入图片描述][20200102172449106.PNG]

1.  第五步，在浏览器中打开网址，输入 `http://localhost:8080`，出现如下的图片，说明`vue`的项目已经创建成功了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 3]

1.  第六步，如果我们所做的项目是移动端的项目，我们需要进行一些设置。在项目文件最外层的 `index.html` 中，设置 `meta` 标签中的 `viewport` , 将 `minimum-scale=1.0, maximum-scale=1.0, user-scalable=no` ， 这样就可以确保移动端用户放大或者缩小的操作是无效的，屏幕比例始终为1 : 1。  
    代码所示如下：

1.  第七步，在移动端项目中，我们也需要引入一些文件，解决一些问题，可以在 `main.js`文件中引入。  
    1）引入 `reset.css`， 可以进行样式的重置，帮助我们构建移动端项目中的一些样式问题。  
    2）引入 `border.css`，可以解决 1像素边框的问题，1像素边框也是移动端项目常见的问题。  
    3）引入 `fastclick`，可以解决 300ms 点击延迟的问题，通过 `npm install fastclick --save` 命令进行下载，如下图所示：  
    ![在这里插入图片描述][20200102172539853.PNG]  
    在下载完`fastclick`以后，然后 `import fastClick from 'fastclick' 以及 fastClick.attach(document.body)` 去进行使用  
    代码所示如下：

import fastClick from 'fastclick'
    import './assets/styles/reset.css'
    import './assets/styles/border.css'
    
    Vue.config.productionTip = false
    fastClick.attach(document.body)

1.  最后，如果想要看完整的项目代码，可以去我的 `github`项目地址上看。如果觉得还不错，可以点一个`star`，谢谢了，地址如下：  
    `https://github.com/jiuchengTk279/vueDemo`

[2020010217212813.PNG]: https://img-blog.csdnimg.cn/2020010217212813.PNG
[20200102172141492.PNG]: https://img-blog.csdnimg.cn/20200102172141492.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200102172234687.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200102172220644.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70
[20200102172301519.PNG]: https://img-blog.csdnimg.cn/20200102172301519.PNG
[20200102172649364.PNG]: https://img-blog.csdnimg.cn/20200102172649364.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200102172702873.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70
[20200102172449106.PNG]: https://img-blog.csdnimg.cn/20200102172449106.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200102172437846.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70
[20200102172539853.PNG]: https://img-blog.csdnimg.cn/20200102172539853.PNG